Components

Button

Primary interaction element with four semantic variants and a loading state for async operations.

Input

Text input with label, helper text, and error state. The foundation for all form-based interactions.

Badge

Compact status indicators with five semantic color variants for conveying state at a glance.

Card

Content container with optional header and footer slots. The structural building block for grouped information.

Toast

Ephemeral notification for success confirmations, warnings, and errors. Appears briefly, then dismisses.

Modal

Dialog overlay for confirmations, settings, and focused tasks that require attention before continuing.

Tabs

Horizontal tab navigation for switching between content panels without page navigation.

Toggle

Binary switch for on/off states with optional label and description.

Select

Dropdown select with keyboard navigation, origin-aware positioning, and ARIA listbox pattern.

Tooltip

Contextual hint that appears on hover or focus with a skip-delay pattern — instant on subsequent triggers.

Avatar

User representation with image, initials fallback, and optional status indicator.

Banner

Full-width alert banner for system-level messages with four semantic variants and optional dismiss.

Checkbox

Binary or tri-state checkbox with spring-animated check icon, label, and description.

Radio

Radio group for mutually exclusive selection with spring-animated selection dot and context-based state sharing.