States

state="loading"

Hides children and shows a centered spinner. Element retains its size.

<button surface="solid" tone="primary" density="default" radius="md" state="loading">
  Saving…
</button>

state="disabled"

Reduces opacity to 45% and disables pointer events. Works on any element.

<button surface="solid" tone="primary" density="default" radius="md" state="disabled">
  Disabled
</button>

<div field state="disabled">
  <label>Disabled input</label>
  <input input placeholder="Not editable" />
</div>

state="skeleton"

Animated shimmer for loading placeholders. Hides inner content and adds a pulse effect.

<!-- Card skeleton -->
<div surface="matte" density="spacious" radius="xl" layout="stack" gap="sm">
  <div state="skeleton" style="height: 120px; border-radius: 8px;"></div>
  <div state="skeleton" radius="md" style="height: 14px; width: 70%;"></div>
  <div state="skeleton" radius="md" style="height: 14px; width: 45%;"></div>
</div>

state="error" / "success" / "warning"

Sets --aura-tone-color for the element, allowing downstream surfaces and borders to inherit the semantic color.

<div surface="ghost" tone="danger"  density="compact" radius="md" state="error">
  ⚠ Something went wrong
</div>
<div surface="ghost" tone="success" density="compact" radius="md" state="success">
  ✓ Changes saved
</div>
<div surface="ghost" tone="warning" density="compact" radius="md" state="warning">
  ⚡ Storage at 90%
</div>

Banner notifications

<div surface="solid" tone="danger" density="default" radius="lg" layout="row" gap="sm" state="error">
  <span>⚠</span>
  <div layout="stack" gap="xs">
    <p weight="semibold">Authentication failed</p>
    <p text="caption">Your session has expired. Please sign in again.</p>
  </div>
</div>