Button

A lightweight semantic button component built with native HTML and CSS variables.

The Button component in ignix-lite uses the native <button> element and supports multiple intent variants, loading states, focus styles, and accessibility-friendly interactions.

---

Intent Variant

Preview

Code

<button data-intent="primary">Primary</button>
<button data-intent="danger">Danger</button>
<button data-intent="warning">Warning</button>
<button data-intent="success">Success</button>
<button data-intent="neutral">Neutral</button>
<button data-intent="ghost">Ghost</button>

---

Disabled

Preview

Code

<button data-intent="primary" disabled>
  Disabled
</button>

---

Loading

Preview

Code

<button data-intent="primary" aria-busy="true">
  <span>Loading</span>
</button>

---

Usage

Preview

Code

<div data-layout="inline" data-gap="sm">
  <button data-intent="primary">
    Save Changes
  </button>

  <button data-intent="neutral">
    Cancel
  </button>
</div>

---

Attributes

Attribute	Type	Description
data-intent	'primary' | 'danger' | 'warning' | 'success' | 'neutral' | 'ghost'	Applies semantic visual styles
disabled	boolean	Disables interactions and reduces opacity
aria-busy	boolean	Displays loading spinner state
type	'button' | 'submit' | 'reset'	Native HTML button type
children	HTML content	Button label or content