Patterns
CSS-only building blocks of the design system.
Button
Solid, outline, and ghost variants for primary, secondary, and tertiary actions.
Icon
SVG icons via CSS mask, inheriting color and size from the parent.
Badge
Pill-shaped labels for status, counts, or highlights.
Status Light
Compact semantic status indicator with optional label and size variants.
Meter
Visual indicator of a value within a known range.
Label
Text and icon primitives for components and form fields.
Input
Text input with token-driven states for data entry.
Search Field
Search-specialized input with icon, clear action, Enter submit, and quiet variant.
Checkbox
Binary selection with checked, unchecked, and indeterminate states.
Radio
Mutually exclusive choices within a group.
Range Slider
Dual-thumb slider for selecting a bounded numeric range.
Progress Circle
Circular loading indicator for determinate and indeterminate progress.
Switch
Binary toggle for immediate on/off settings.
Profile updated
Notification
Transient status messages with variants, actions, and auto-dismiss support.
Link
Inline and standalone navigation with token-driven states.
Breadcrumbs
Hierarchical navigation with separators, truncation, and responsive collapse.
Modal
Focused dialogs for alerts and confirmations with trapped focus and backdrop overlay.
Select
Dropdown for choosing a single option from a predefined list.
TreeView
Hierarchical tree navigation with expand/collapse, selection, and keyboard support.
DropZone
Drag-and-drop upload target with accessible file picker fallback.
Color Picker
Composite color selection with area, sliders, wheel, swatch preview, and value inputs.