Button
.button
Button; used for form-actions and major CTA links.
Markup
<!-- Default button -->
<button class="button {{modifier_class}}">Default Button</button>
<!-- Disabled button -->
<button disabled="disabled" class="button {{modifier_class}}">Disabled Button</button>Modifiers
.button--buy
Button that leads to an e-commerce funnel, with a cart icon
.button--nsYellow
A generic yellow button intended for e-commerce and other purchase-related flows.
.button--secondary
Grey button for any secondary actions
.button--arrowLeft
Button with an arrow on the left
.button--arrowLeft.button--secondary
Secondary button with arrow on the left
.button--arrowRight
Button with an arrow on the right
.button--arrowRight.button--secondary
Secondary button with arrow on the right
.button--tertiary
Transparent button meant for the least important actions
.button--appStore
Button to link to the Apple App Store
.button--playStore
Button to link to the Google Play store
.is-disabled
A specific class for disabled buttons, usually this would be done with the 'disabled'-attribute.
.button--native-link
A button styled as a link
.button--loadingRight
A button with a loading indicator