Default

This is the default style for buttons.

Primary

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

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.

Ghost

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 ">Reset filters</button>
<button class="button {{modifier}}" {{#if disabled}}disabled{{/if}}>{{label}}</button>
{
  "label": "Reset filters"
}