3 #permalink Buttons
The button tag defines a clickable button. Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.
.button
Basic
.button used throughout the site.
.button--inverse
Basic
.button used throughout the site.
.button--transparent--dark
A transparent button with gray text and border.
.button--transparent--light
A transparent button with white text and border.
.button-sm
Use
.button-sm for small buttons.
.button--success
Use
.button for most common page actions.
.button--success--inverse
Use
.button for most common page actions.
.button--success--transparent
Use
.button for most common page actions.
.button--purple
A flat purple button.
.button--purple--inverse
A flat purple button.
.button--purple--transparent
A flat purple button.
.button--warning
To indicate to a user that an intended action is potentially dangerous, apply the
.button--warning class to a button or link.
.button--warning--inverse
To indicate to a user that an intended action is potentially dangerous, apply the
.button--warning class to a button or link.
.button--warning--transparent
To indicate to a user that an intended action is potentially dangerous, apply the
.button--warning class to a button or link.
.button--info
Use this for links that provide additional information.
.button--info--inverse
Use this for links that provide additional information.
.button--info--transparent
Use this for links that provide additional information.
.button--dark-gray
A dark button to be used in the footer.
.button--dark-gray--inverse
A dark button to be used in the footer.
.button--dark-gray--transparent
A dark button to be used in the footer.
<button class="[modifier class]">Button Element</button>
<a class="button [modifier class]" href="#" role="button">Link button</a>
<a class="button [modifier class] button-sm" href="#" role="button">Small button</a>
.button--dark-gray
Dark Gray button group.
.button--green
Green button group.
.button--blue
Blue button group.
.button--purple
Purple button group.
<div class="button-group">
<button class="button [modifier class]">Button Element</button>
<button class="button [modifier class]">Button Element</button>
<button class="button [modifier class]">Button Element</button>
</div>
.disabled
Basic
.button used throughout the site.
.button--transparent--dark
A transparent button with gray text and border
.button--transparent--light
A transparent button with white text and border.
.button--success
Use
.button for most common page actions.
.button--success--inverse
Use
.button for most common page actions.
.button--success--transparent
Use
.button for most common page actions.
.button--purple
A flat purple button
.button--purple--inverse
A flat purple button.
.button--purple--transparent
A flat purple button.
.button--warning
To indicate to a user that an intended action is potentially dangerous, apply the
.button--warning class to a button or link.
.button--warning--inverse
To indicate to a user that an intended action is potentially dangerous, apply the
.button--warning class to a button or link.
.button--warning--transparent
To indicate to a user that an intended action is potentially dangerous, apply the
.button--warning class to a button or link.
.button--info
Use this for links that provide additional information.
.button--info--inverse
Use this for links that provide additional information.
.button--info--transparent
Use this for links that provide additional information.
.button--dark-gray
A dark button to be used in the footer.
.button--dark-gray--inverse
A dark button to be used in the footer.
.button--dark-gray--transparent
A dark button to be used in the footer.
<button class="button [modifier class]" type="button" disabled>Disabled button</button>
<a class="button [modifier class] disabled" href="#" role="button">Disabled button</a>
<a class="button [modifier class] disabled button-sm" href="#" role="button">Small button</a>