Skip to main content

Buttons

Button styles for primary actions, secondary actions, and destructive operations.

Button variants

<button class="l-ui-button l-ui-button--primary">Primary</button>
<button class="l-ui-button l-ui-button--outline">Outline</button>
<button class="l-ui-button l-ui-button--danger">Danger</button>
<button class="l-ui-button l-ui-button--outline-danger">Outline danger</button>
<button class="l-ui-button l-ui-button--icon" aria-label="Close">
  <svg class="l-ui-icon l-ui-icon--sm">...</svg>
</button>
<button class="l-ui-button l-ui-button--icon" aria-label="Toggle dark mode">
  <svg class="l-ui-icon l-ui-icon--sm">...</svg>
</button>

Disabled

<button class="l-ui-button l-ui-button--primary" disabled>
  Primary disabled
</button>

Small

Compact button for dense areas like header bars. 32px hit area comfortably exceeds the WCAG 2.2 AA 24px target size minimum.

<button class="l-ui-button l-ui-button--primary l-ui-button--small">
  Primary small
</button>

Small icon button

Combine l-ui-button--icon with l-ui-button--small for a compact 32px square icon button, useful in dense areas like panel actions or comment toolbars. The 32px hit area comfortably exceeds the WCAG 2.2 AA 24px target size minimum.

<button class="l-ui-button l-ui-button--icon l-ui-button--small" aria-label="Close">
  <svg class="l-ui-icon l-ui-icon--sm">...</svg>
</button>

Full width

<button class="l-ui-button l-ui-button--primary l-ui-button--full">
  Full width button
</button>

CSS classes

Button CSS classes
Class Description
l-ui-button--primary Primary action button with solid background (standalone)
l-ui-button--outline Secondary action button with outline style (standalone)
l-ui-button--danger Solid red destructive action button (standalone)
l-ui-button--outline-danger Destructive action button with red outline (standalone)
l-ui-button l-ui-button--icon Icon-only button for close, theme toggle, and other actions (standalone)
l-ui-button--full Modifier - combine with a variant above for full-width
l-ui-button--small Modifier - combine with a variant above for a compact 32px-tall button