Skip to main content

​
Overview

Buttons use a preset system with two parts: a semantic color class and, when needed, a size class. Start with a preset like button-primary, then add a size like button-lg when the default scale is not the right fit.

​
Examples

​
Basic button preset

Use a semantic preset like button-primary when you need a standard primary action without changing the size.
This is the base pattern for the button system: choose the preset that matches the action, then layer in size only when you need it.

​
Choosing a semantic color

Use a semantic token to communicate intent. For example, button-success works well for positive confirmations and completion actions.

​
Changing size

Add a size class next to the preset when the button should feel more prominent or more compact in the layout.
Size classes only make sense when they are paired with a semantic preset.

​
Combining with utilities

Preset classes define the button itself, and utilities handle the surrounding composition. This works well when a button needs spacing or typography adjustments inside a larger layout.
Use utilities around the button or alongside the preset when you need layout, spacing, or text-level refinement without replacing the preset system.

​
Notes

  • Every button starts with a semantic preset such as button-primary or button-success.
  • Size classes only make sense next to a color preset (button-primary button-md).
  • secondary is a light fill (#aaebfd); use text-black or text-gray-dark on the label if contrast is weak.
  • You can still add spacing, layout, or typography utilities alongside the preset classes.