Buttons
Default Button
Usage: For general actions and secondary actions.
Buttons that follow other buttons automatically get left margin for nice spacing. If you don't want this behavior, add class no-autospace to any buttons that you don't want margin-left automatically applied.
Add the class danger for buttons with irreversible/dangerous actions.
<button>Default Button</button>
<button class="disabled">Disabled Default Button</button>
<div style="margin-top: 1em;">
<button>Button</button>
<button class="no-autospace">Button</button>
<button class="danger">Danger button</button>
</div>Key Button
Usage: Add an associated color to a button. For use with graph controls, where the button's color is associated with the color of a data point.
Add the class active if the button is activated.
To set a color, name-space the button and style the border-top-color and .active background-color.
You may also need to set the .active color to #333 (or @clr-text) if the color you're using is too light for white text.
Example:
button.my-button-class {
border-top-color: green;
&.active,
&:active {
background-color: green;
}
}
<button class="key">Show Data Point</button>
<button class="key active">Data Point Showing</button>Primary Button
Usage: Only for the "next logical step", such as "save", "next", etc. Only one per view.
The user should expect that they can reliably click this to progress without having to really read it.
Add the class danger to make a red primary button. For when an action is irreversible/dangerous.
<button class="primary">Primary Button</button>
<button class="primary disabled">Disabled Primary Button</button>
<button class="primary danger">Dangerous Primary Button</button>Special Action Button
Usage: Rarely used. Only for actions that trigger a journey, such as "+ New Survey". Only 1 per view (if any).
<button class="special-action">Special Action Button</button>
<button class="special-action disabled">Disabled Special Action Button</button>Text Button
Usage: Indicates a supporting action, typically inside of a tab or accordion menu.
This may also be used for an icon only button, otherwise always accompany a text button with an icon to differentiate from a standard link.
Add the class flush to remove button padding.
Add the class flush-sides to remove only the left/right padding.
<button class="text icon-add">Text Button</button>
<button class="text icon-add disabled">Disabled Text Button</button>
<button class="text icon-add flush">Flush Text Button</button>
<button class="text icon-add flush-sides">Sides Flushed Text Button</button>
<button class="text icon-add flush-icon"><span class="sr-only">Add</span></button>Clear Button
Usage: For "remove" or "cancel" actions.
Add the class flush to remove button padding.
Add the class flush-icon to remove the icon's default margin.
<button class="clear">Cancel</button>
<button class="clear disabled">Cancel</button>
<button class="clear icon-remove flush-icon"><span class="sr-only">Remove</span></button>Button Group
Usage: For toggle controls.
Add class active to the activated button option.
<div class="btn-group">
<button>Option 1</button>
<button>Option 2</button>
<button class="active">Option 3</button>
<button>Option 4</button>
</div>
<div class="btn-group">
<button class="key option-one">Option 1</button>
<button class="key option-two active">Option 2</button>
<button class="key option-three">Option 3</button>
<button class="key option-four">Option 4</button>
</div>Button Sizes
<button class="small">Small Button</button>
<button>Normal</button>
<button class="large">Large Button</button>
<button class="block">Block Button</button>Links
Remember that links are not buttons.
Add the class button-spacing to add the same padding as buttons, for when links are inline with buttons. Add the class flush-sides to an a.button-spacing to flush the left and right padding.
<a href="#0">Standard Link</a>
<a href="#0" class="button-spacing">Link w/ Button Spacing</a>
<button>Button to Compare With</button>
<a href="#0" class="button-spacing flush-sides">Link w/ Button Spacing & Flushed Sides</a>