--- title: 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]({{relative absolute 'dist/docs/components/dropdown.html'}}) to attach a split button to the button style of your choice.

*** {{> examples_split_button_basic}} ***

Basic

You can create a split button using minimal markup.

HTML

{{> examples_split_button_basic_rendered}}

Rendered HTML

Split Button
{{!-- {{> examples_split_button_basic}} --}}
***

Advanced

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

HTML

{{> examples_split_button_advanced_rendered}}

HTML Rendered

{{> examples_split_button_advanced}}
*** ## 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

{{> examples_split_button_variables}} *** ## 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

{{#markdown}} ```scss .custom-split-button-class { @include split-button(); } ``` {{/markdown}}

HTML

{{#markdown}} ```html Split Button Text ``` {{/markdown}}

Advanced

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

SCSS

{{#markdown}} ```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 ); } ``` {{/markdown}} *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/buttons"; @import "foundation/components/split-buttons"; ```