Patterns

CSS-only building blocks of the design system.

Button

Solid, outline, and ghost variants for primary, secondary, and tertiary actions.

SVG icons via CSS mask, inheriting color and size from the parent.

Pill-shaped labels for status, counts, or highlights.

Text and icon primitives for components and form fields.

Text input with token-driven states for data entry.

Binary selection with checked, unchecked, and indeterminate states.

Mutually exclusive choices within a group.

Binary toggle for immediate on/off settings.

Inline and standalone navigation with token-driven states.

Dropdown for choosing a single option from a predefined list.