Split Buttons

We've simplified our split downdrop buttons by removing the dedicated ones associated with a style of button. Instead, you'll use our new dropdown plugin to attach a split button to the button style of your choice.


Split Button

Split Button

Split Button

Split Button


Basic

You can create a split button using minimal markup.

HTML

<a href="#" class="button split">Split Button <span data-dropdown="drop"></span></a><br> <ul id="drop" class="f-dropdown" data-dropdown-content> <li><a href="#">This is a link</a></li> <li><a href="#">This is another</a></li> <li><a href="#">Yet another</a></li> </ul>

Advanced

Additional classes can be added to your split buttons to change its appearance.

HTML

<a href="#" class="[tiny small medium large] [secondary alert success] [radius round] button split">Split Button <span data-dropdown="drop"></span></a><br> <ul id="drop" class="f-dropdown" data-dropdown-content> <li><a href="#">This is a link</a></li> <li><a href="#">This is another</a></li> <li><a href="#">Yet another</a></li> </ul>

Custom Pip

If you desire to use your own pip in the split button, the no-pip class will remove ours and allow you to place any icon inside of the pip span

HTML

<a href="#" class="button split no-pip">Custom Pip<span><i class="fi-arrow-down"></i></span></a>

HTML Rendered

Custom Pip

Accessibility

This component is not yet accessible. Stay tuned for updates in future releases.


Customize with Sass

Split buttons can be easily customized using our provided Sass variables.

SCSS

$include-html-button-classes: $include-html-classes; /* We use these to control different shared styles for Split Buttons */ $split-button-function-factor: 15%; $split-button-pip-color: #fff; $split-button-pip-color-alt: #333; $split-button-active-bg-tint: rgba(0,0,0,0.1); /* We use these to control tiny split buttons */ $split-button-padding-tny: $button-tny * 9; $split-button-span-width-tny: $button-tny * 6.5; $split-button-pip-size-tny: $button-tny; $split-button-pip-top-tny: $button-tny * 2; $split-button-pip-default-float-tny: rem-calc(-5); /* We use these to control small split buttons */ $split-button-padding-sml: $button-sml * 7; $split-button-span-width-sml: $button-sml * 5; $split-button-pip-size-sml: $button-sml; $split-button-pip-top-sml: $button-sml * 1.5; $split-button-pip-default-float-sml: rem-calc(-9); /* We use these to control medium split buttons */ $split-button-padding-med: $button-med * 6.4; $split-button-span-width-med: $button-med * 4; $split-button-pip-size-med: $button-med - rem-calc(3); $split-button-pip-top-med: $button-med * 1.5; $split-button-pip-default-float-med: rem-calc(-9); /* We use these to control large split buttons */ $split-button-padding-lrg: $button-lrg * 6; $split-button-span-width-lrg: $button-lrg * 3.75; $split-button-pip-size-lrg: $button-lrg - rem-calc(6); $split-button-pip-top-lrg: $button-lrg + rem-calc(5); $split-button-pip-default-float-lrg: rem-calc(-9);

Semantic Markup with Sass

You can create your own split buttons using our Sass mixins.

Basic

You can use the split-button() mixin to create your own split button, like so:

SCSS

.custom-split-button-class { @include split-button(); }

HTML

<a href="#" class="custom-split-button-class">Split Button Text <span></span></a>

Advanced

You can further customize your split buttons using the provided options in the split-button mixin:

SCSS

.custom-split-button-class { @include split-button( // Type of padding to apply. Default: medium. // Options: tiny, small, medium, large. $padding: medium, // Color of the triangle. Default: $split-button-pip-color. $pip-color: orange, // Border color of button divider. Default: $primary-color. $span-border: pink, // Apply base style to split button. Default: true. $base-style: true ); }

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/buttons"; @import "foundation/components/split-buttons";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »