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>

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 »