Button

Buttons can trigger an action or navigate the user to another location. They communicate intent through labeling, iconography and semantic styling.

Usage

Use buttons to represent clear, intentional actions. Select the appropriate semantic variant to match the action’s intent, and use outline, transparent, or link variants for lower-emphasis actions. The primary button should be used for the main or suggested action. For example, the "Create" button on a "New File" dialog should be the primary one. Avoid overloading interfaces with too many primary buttons.

API Reference

Component attribute(s)

x-h-button

Attributes

Attribute	Type	Required	Description
data-variant	primary positive negative warning information outline transparent link	false	Changes the color/shape of the button. Can be used to indicate different states.
data-size	sm md icon-sm icon-md icon default	false	Changes the size of the button. When the button contains only an icon, the icon-* values should be used.
data-toggled	boolean	false	Set the toggle state.
aria-disabled	boolean	false	Styles the button as disabled while keeping it focusable and announced. Events like click still work, so it's the user's job to handle them.

Modifiers

Modifier	Description
addon	Used when the button is inside an input group addon

Data Slots

Slot	Element
button	x-h-button, unless another component on the same element sets its own slot

Examples

Default

<button x-h-button>Default</button>

Primary

<button x-h-button data-variant="primary">Primary</button>

Positive

<button x-h-button data-variant="positive">Positive</button>

Negative

<button x-h-button data-variant="negative">Negative</button>

Warning

<button x-h-button data-variant="warning">Warning</button>

Information

<button x-h-button data-variant="information">Information</button>

Outline

<button x-h-button data-variant="outline">Outline</button>

Transparent

<button x-h-button data-variant="transparent">Transparent</button>

Link

<a x-h-button data-variant="link" href="#">Link</a>

Disabled

<button x-h-button disabled>Disabled</button>

Disabled focusable

Use aria-disabled="true" instead of disabled when an unavailable button must stay reachable, for example so keyboard and screen reader users can find it and learn why it is unavailable.

<button x-h-button x-h-tooltip-trigger aria-disabled="true">Publish</button>
<div x-h-tooltip>Add a title before publishing</div>

Toggle button

A toggle button usually belongs in a button group. It is rarely used on its own. For a single on/off control, a switch or a checkbox is a better fit. When a toggle button does stand alone, for example in a toolbar, make its state clear from the label, the icon, or both. Do NOT rely on color alone.

<div x-data="{ toggled: true }">
  <button x-h-button :data-toggled="toggled" @click="toggled = !toggled" x-text="toggled ? 'Untoggle' : 'Toggle'"></button>
</div>

Button with icons

You can include an icon directly inside the button.

<button x-h-button>
  <svg x-h-lucide role="presentation" data-lucide="chevron-left"></svg>
  Left-aligned
</button>
<button x-h-button>
  <svg x-h-lucide role="presentation" data-lucide="chevron-right"></svg>
  Right-aligned
</button>
<button x-h-button>
  <svg x-h-icon data-icon="search" role="presentation"></svg>
  Search
</button>

Button with spinner

You can include a spinner directly inside the button. The spinner will adjust its color based on the button variant.

<button x-h-button>
  <span x-h-spinner></span>
  <span>Saving...</span>
</button>
<button x-h-button data-variant="primary">
  <span x-h-spinner></span>
  <span>Saving...</span>
</button>

Icon button

<button x-h-button data-size="icon" aria-label="Icon button">
  <svg x-h-lucide role="presentation" data-lucide="save"></svg>
</button>

Button sizes

Small

<button x-h-button data-size="sm">
  <svg x-h-lucide role="presentation" data-lucide="save"></svg>
  Save
</button>
<button x-h-button data-size="icon-sm" aria-label="Icon button">
  <svg x-h-lucide role="presentation" data-lucide="save"></svg>
</button>

Medium

<button x-h-button data-size="md">
  <svg x-h-lucide role="presentation" data-lucide="save"></svg>
  Save
</button>
<button x-h-button data-size="icon-md" aria-label="Icon button">
  <svg x-h-lucide role="presentation" data-lucide="save"></svg>
</button>