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