Color - danger

Text colors

Use with all instances of danger status-related element text.

• text-initial
• Default text inside of status elements
• Use for: Admonition text, Toast text, Badges

• Token Name: danger.text.initial

• text-100
• Low emphasis text in status elements
• Use for: Input status icons

• Token Name: danger.text.100

• text-200
• Highest emphasis text in status elements
• Use for: Admonition icons, Toast icons

• Token Name: danger.text.200

• text-inverse
• Highest emphasis text in status elements
• Use for: Danger Button text and icons

• Token Name: danger.text.inverse

Border colors

All borders of non-interactive interface items

• border
• Border color of danger status-related interface items
• Use for: Admonition border, Badges

• Token Name: danger.border.initial

Background colors

All color fills of danger status-related elements like avatar, skeleton, or progress

• background-initial
• Surface color of status elements
• Use for: Danger Buttons

• Token Name: danger.bg.initial

• background-hover
• Surface color of status elements
• Use for: Danger Button Hover state

• Token Name: danger.bg.hover

• background-active
• Surface color of status elements
• Use for: Danger Button active state

• Token Name: danger.bg.active

Surface colors

All color fills of danger status-related elements like avatar, skeleton, or progress

• surface
• Surface color of non-interactive status elements
• Use for: Admonition, Toast, Badge backgrounds

• Token Name: danger.surface.initial