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 attubute(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.

Modifiers

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

Button Variants

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>

Toggle Button

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

Button with icons

You can include an icon directly inside the button.

<button x-h-button>
  <i role="img" data-lucide="chevron-left"></i>
  Left-aligned
</button>
<button x-h-button>
  <i role="img" data-lucide="chevron-right"></i>
  Right-aligned
</button>
<button x-h-button>
  <svg class="fill-foreground" width="512" height="512" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path
      d="m10 0a10 10 0 0 0-10 10 10 10 0 0 0 10 9.9999 10 10 0 0 0 6.3163-2.2473l6.2474 6.2474 1.4363-1.4363-6.2474-6.2474a10 10 0 0 0 2.2473-6.3163 10 10 0 0 0-9.9999-10zm0 2.0313a7.9688 7.9688 0 0 1 7.9688 7.9688 7.9688 7.9688 0 0 1-7.9688 7.9688 7.9688 7.9688 0 0 1-7.9688-7.9688 7.9688 7.9688 0 0 1 7.9688-7.9688z"
      fill-rule="evenodd"
    />
  </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">
  <i role="img" data-lucide="save"></i>
</button>

Button sizes

Small

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

Medium

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