---
title: Split Buttons
---
***
{{> 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}}
***
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
{{> examples_split_button_custom_pip_rendered}}
HTML Rendered
{{> examples_split_button_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
{{> 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";
```