This is the default style for buttons.


This button state should be used to highlight the primary (call to) action on a page. Try to refrain from using multiple primary buttons on a single page.


Disabled buttons do not have a hover or focus state and can’t be clicked by the users. They are visually muted to set them apart from other buttons.

Accessibility wise they are not great, because users might not understand why they can’t click on a button.


this button has a white border and text, it should only be used on a dark background. Make sure there is enough contrast with the background to ensure proper accessibility.

<button class="button button--primary">Search</button>
<button class="button {{modifier}}" {{#if disabled}}disabled{{/if}}>{{label}}</button>
  "label": "Search",
  "modifier": "button--primary"