Button
Trigger actions and events. The most fundamental interactive element.
4 variants 3 sizes 4 states
Badge
Compact status indicators and labels for metadata annotation.
4 variants 3 sizes
Card
Container for grouping related content and actions together.
4 variants
Text Input
Single-line text entry field with labels, icons, and validation states.
4 variants 4 states
Toggle
Binary on/off switch for instant settings changes. CSS-only interactivity.
3 sizes 3 states interactive
Progress Bar
Visual indicator of task completion or loading state with animated variants.
4 variants 4 levels animated
All Variants
Primary
Save
Submit
Continue
Secondary
Cancel
Edit
Configure
Ghost
Skip
Learn More
View Details
Destructive
Remove
Delete
Delete Account
States
Default
Submit
Cancel
Skip
Delete
Hover
Submit
Cancel
Skip
Delete
Active
Submit
Cancel
Skip
Delete
Disabled
Submit
Cancel
Skip
Delete
Size Comparison
Small
Save
height: 30px
Medium
Save Changes
height: 36px
Large
Save All Changes
height: 42px
All Variants
Default
Draft
Draft
Draft
Success
Active
Active
Active
Warning
Beta
Beta
Beta
Error
Deprecated
Deprecated
Deprecated
Real-World Usage
Status
Published
Pending Review
Failed
Archived
Labels
New
Beta
Deprecated
v2.1
Counts
12
99+
3
All Variants
Default Card
A simple bordered container for grouping related content together.
View Dismiss
Elevated Card
Uses shadow depth to create visual hierarchy and draw attention.
Open Later
Ghost Card
Transparent background for subtle grouping without visual weight.
Details
Interactive Card
Responds to hover with accent border glow. Hover me to see the effect.
Select Skip
Content Examples
API Usage
Last 30 days
14,283
+12.4% from last month
Team Members
Manage who has access to this workspace and their permissions.
+5
Manage Invite
Input Variants
Email Address
you@example.com
We'll never share your email.
Search
Search components...
Website
https:// example.com
States
Default
Enter text...
Helper text goes here.
Filled
John Doe
Looking good!
Focused
Typing...
Input is focused.
Disabled
Cannot edit
This field is locked.
Error
invalid-email
Please enter a valid email address.
Static Specimens
Off
On
Disabled
Interactive Demo (Click to toggle!)
Small
Medium
Large
Size Reference
Small
28 x 16
Medium
36 x 20
Large
44 x 24
Completion Levels
Getting started 25%
In progress 50%
Almost there 75%
Complete 100%
Color Variants
Default (Accent) 65%
Success 82%
Warning 45%
Error 12%
Indeterminate (Animated)
Loading...
Skeleton Loading