Display Gallery
Avatars, badges, and display components
Interactive Badges
Subtle Colors
Subtle interactive, shadow on hover
Accent Colors
Accent interactive, click to see toast in the same color:
Outerline Colors
Outerline interactive, click to toggle active/inactive state, see toast with updated count:
Solid Colors
Solid interactive, click to toggle active/inactive state, see toast with updated count:
Secondary Colors
Secondarry interactive, click to see alarm clock in same color:
Simple Colors
Simple interactive, click to see lightbulb same color:
Gradient Colors
Gradient interactive, click to see gradient colors:
Badges with Icons
Badges with Icons
3 newOnlineUrgent12 itemsPremium
Interactive Badges
Filter Badges (For Service Discovery)
Semantic colors and types
Outline:
SuccessWarningErrorInfo
Subtle:
SuccessWarningErrorInfo
Solid:
SuccessWarningErrorInfo
Gradient:
SuccessWarningErrorInfo
Explore More Components
Browse other component categories