[role="button"]

Any element with role="button" is rendered as a button.

This is useful when a non-button element (e.g. <div>, <span>) needs to behave and look like a button.

This role can also be applied to <details> elements to create Accordion buttons and Dropdown buttons.

Basic Usage

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

Variants

Intent Variants

To convey intent and importance, buttons can be styled with different variants. The default variant is .primary, which is used for the most important actions on a page, but there are also:

See code

<section class="primary" role="button">
  &lt;section&gt; as button
</section>
  <section class="secondary" role="button">
  &lt;section&gt; as button
</section>
  <section class="contrast" role="button">
  &lt;section&gt; as button
</section>
  <section class="success" role="button">
  &lt;section&gt; as button
</section>
<section class="info" role="button">
  &lt;section&gt; as button
</section>
<section class="warning" role="button">
  &lt;section&gt; as button
</section>
<section class="danger" role="button">
  &lt;section&gt; as button
</section>

Modifiers

.ghost creates transparent background buttons with colored text and borders, useful for secondary actions where you want minimal visual weight.

See code

<section class="primary ghost" role="button">
  &lt;section&gt; as button
</section>
  <section class="secondary ghost" role="button">
  &lt;section&gt; as button
</section>
  <section class="contrast ghost" role="button">
  &lt;section&gt; as button
</section>
  <section class="success ghost" role="button">
  &lt;section&gt; as button
</section>
<section class="info ghost" role="button">
  &lt;section&gt; as button
</section>
<section class="warning ghost" role="button">
  &lt;section&gt; as button
</section>
<section class="danger ghost" role="button">
  &lt;section&gt; as button
</section>

.subtle creates buttons with a more muted appearance, often used for less prominent actions.

See code

<section class="primary subtle" role="button">
  &lt;section&gt; as button
</section>
  <section class="secondary subtle" role="button">
  &lt;section&gt; as button
</section>
  <section class="contrast subtle" role="button">
  &lt;section&gt; as button
</section>
  <section class="success subtle" role="button">
  &lt;section&gt; as button
</section>
<section class="info subtle" role="button">
  &lt;section&gt; as button
</section>
<section class="warning subtle" role="button">
  &lt;section&gt; as button
</section>
<section class="danger subtle" role="button">
  &lt;section&gt; as button
</section>