Buttons

Buttons are implemented using different approaches:

• Using the native <button> element
• Using Input Buttons elements like <input type="button"> or <input type="submit">
• Styling anchors with .button while preserving their link semantics
• Combining [role=button] with elements like <a>, <div>, etc.

The choice of element depends on the context and the desired behavior of the button.

Basic Button

See the <button> for more details on button variations.

<button>
  Button
</button>

Links styled as buttons

Use .button on an anchor for navigation that looks like a button. The anchor keeps its native link semantics and keyboard behavior; use a native <button> for actions.

<a href="/guide" class="button">
  Read the guide
</a>
<a href="/download" class="button secondary ghost size-sm">
  Download
</a>

Input Types

See more at Input Buttons

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

Div as Button

See more at [role=button] for more details on button variations.

<div role="button">
  &lt;div&gt; as button
</div>

Close Button

Simply add a class="icon-close" to a button or use <span class="icon-close" aria-hidden="true"></span> inside a button if you want to display text.

Accessibility: In case the button does not have text, always add an aria-label (e.g., aria-label="Close") so screen readers announce the button's purpose.

See the Icons documentation for more details on the .icon-close class and its usage.

<button aria-label="Close" class="icon-close"></button>

<hr>

<button aria-label="Close" class="secondary">
  Close <span class="icon-close" aria-hidden="true"></span>
</button>