Buttons

Trace CSS styles native buttons in every build. Set an explicit type to match the button’s action.

#Native button types

Use type="button" for a standalone action, type="submit" to submit the form, and type="reset" to restore the form’s initial values.

<button type="button">Preview</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

The corresponding native input elements also receive button styles.

<input type="button" value="Preview" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />

#Disabled and busy states

Use disabled to prevent activation. A button with aria-busy="true" displays a loading indicator. Add disabled as well if the action should be unavailable during the operation.

<button type="button" disabled>Unavailable</button>
<button type="button" aria-busy="true" disabled>Saving</button>

See Button tokens to customize colors, spacing, and typography.

#Extension classes

The Full build adds color variants, outlines, sizes, and icon styles. You can combine a color, an outline, and a size on the same button.

#Filled colors

Use trace-primary for the main action, trace-secondary for a supporting action, and trace-danger for a destructive action.

<button type="button" class="trace-primary">Primary</button>
<button type="button" class="trace-secondary">Secondary</button>
<button type="button" class="trace-danger">Danger</button>

#Outline colors

Use trace-outline by itself for the default outline. Pair it with a color class to use the corresponding outline color.

<button type="button" class="trace-outline">Default outline</button>
<button type="button" class="trace-primary trace-outline">Primary outline</button>
<button type="button" class="trace-secondary trace-outline">Secondary outline</button>
<button type="button" class="trace-danger trace-outline">Danger outline</button>

#Sizes

Use trace-small for Small and trace-large for Large. Medium is the default size and needs no size class.

<button type="button" class="trace-small">Small</button>
<button type="button">Medium</button>
<button type="button" class="trace-large">Large</button>

#Buttons with icons

Wrap a Lucide SVG in trace-icon and place it before or after the label. Use trace-icon-only for a button with just an icon, and give the button an accessible name with aria-label.

<button type="button" class="trace-primary">
  <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="M12 5v14" />
</svg>
</span>
  Add item
</button>
<button type="button" class="trace-secondary trace-outline">
  Continue
  <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="m12 5 7 7-7 7" />
</svg>
</span>
</button>
<button type="button" class="trace-icon-only" aria-label="Add item">
  <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="M12 5v14" />
</svg>
</span>
</button>