Split Buttons

We've simplified our split dropdown 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

• This is a link
• This is another
• Yet another

Split Button

• This is a link
• This is another
• Yet another

Split Button

• This is a link
• This is another
• Yet another

Split Button

• This is a link
• This is another
• Yet another

Basic

You can create a split button using minimal markup.

<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.

<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

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

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);
$split-button-span-border-color: rgba(255,255,255,0.5);

/* 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";