Button

Primary for the one thing you want people to press, secondary beside it, and ghost for quiet actions. Height follows the theme's density and the corners follow its radius.

Press Send to see it loading.

Markup

<button class="ob-button" type="button">Save changes</button>
<button class="ob-button ob-button--secondary" type="button">Cancel</button>
<button class="ob-button ob-button--ghost" type="button">Skip</button>
<button class="ob-button ob-button--icon" type="button" aria-label="Next"><svg>…</svg></button>

<!-- sizes -->
<button class="ob-button ob-button--sm">…</button>
<button class="ob-button ob-button--lg">…</button>

<!-- loading: the label keeps its space -->
<button class="ob-button" aria-busy="true">
  <span>Send</span>
  <span class="ob-inline-loading" data-state="active">…</span>
</button>

Notes

Every size is at least 44px tall so it's easy to tap. Use a real <button>, or an <a> when it goes somewhere. The inline loading inside only shows while aria-busy is true.

CSS

@import "obvious/css/components/button.css";

Knobs

Set any of these on the component, or an ancestor, to change it.

Property	Default
`--ob-button-height`	var(--ds-control-height-md)
`--ob-button-pad`	var(--ds-control-pad-x-md)
`--ob-button-radius`	var(--ds-radius-md)
`--ob-button-bg`	var(--ds-color-accent)
`--ob-button-bg-hover`	var(--ds-color-accent-hover)
`--ob-button-fg`	var(--ds-color-accent-contrast)
`--ob-button-border`	transparent