Buttons
.Btn
Buttons can be used for actions, links or submitting forms.
Example
Markup
<button class="Btn Btn--caution">Button</button> <button type="submit" class="Btn Btn--primary">Submit</button> <a href="#" class="Btn Btn--secondary">Link</a>
Standard buttons
These are the main variations and states a button can take.
Modifiers
Btn--primary
Use this as the primary action.
Btn--secondary
Use this for secondary actions.
Btn--caution
Use this for destructive or negative actions.
Btn--info
Use this for informative actions.
Btn--neutral
Use this for a generic action button, also the default style
Btn--brand
Use this when the brand color is desired.
Btn--small
Use this when you need a small button.
Btn--inline
Use this when you need a button that should fit it with a line of text.
is-disabled
Use this when the user should not be able to click the button.
Markup
<button class="Btn [modifier class]">Button</button> <button type="submit" class="Btn [modifier class]">Submit</button> <a href="#" class="Btn [modifier class]">Link</a>
Icon buttons
Buttons can be combined with the Icon component. To create a basic button with an icon add the Icon class and any of the Icon--* modifiers for a specific icon.
See Iconography for all options available for icon enhanced buttons and a full list of icons.
Modifiers
Icon--plus
Button with a plus icon, e.g. for adding.
Icon--minus
Button with a mius icon, e.g. for deleting.
Icon--star
Button with a star icon, e.g. for favoriting.
Markup
<button class="Btn Icon [modifier class]">Button</button>