Buttons

Button styles using semantic HTML and ARIA attributes for variants.

Default Button

The primary action button is the default style:

<button>Primary Action</button>

Button Types

All button types receive consistent styling:

<button type="button">Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

Disabled Button

<button disabled>Disabled</button>

Link as Button

Use the role="button" attribute on links to style them as buttons:

Link Button
<a href="#" role="button">Link Button</a>

Button Groups

Group buttons together for related actions:

<div role="group" aria-label="Actions">
  <button>Save</button>
  <button aria-label="Cancel action">Cancel</button>
</div>

Full Width Button

<button style="width: 100%;">Full Width Button</button>