Button Gallery
Button variants, styles, sizes, and interactive states
Social Buttons
Test loading state: click any button
Button Solid Color Variants
Solid background, white text, colored shadow effect on hover, colored ring on focus:
Button Subtle Color Variants
Subtle background, colored text, colored shadow effect on hover, colored ring on focus:
Button Accent Color Variants
Accent background, colored text, colored shadow effect on hover, colored ring on focus:
Button Secondary Color Variants
White background, midnight text & fog border, colored bg-cloud and colored border effect on hover, colored ring on focus:
Button Outline Color Variants
No background, colored text and border, colored shadow and background effect on hover, colored ring on focus:
Button Ghost Color Variants
No background, colored text, colored shadow and background effect on hover, colored ring on focus:
Button Semantic Variants
Outline:
Subtle:
Subtle Alt:
Accent:
Solid:
Gradient:
Alt Solid:
Regular Solid:
Explore More Components
Browse other component categories