Skip to content

Color - warning

A feedback palette that helps to communicate a warning state to the user.

Text colors

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

  • text-initial
  • Default text inside of status elements
  • Use for: Admonition text inside of status elements
  • Token Name: warning.text.initial

  • text-100
  • Low emphasis text in status elements
  • Use for: Currently not used
  • Token Name: warning.text.100

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

Border colors

All borders of non-interactive interface items

  • border
  • Border color of status elements
  • Use for: Admonition border, Badges
  • Token Name: warning.border.initial

Surface colors

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

  • surface
  • Surface color of status elements
  • Use for: Admonition, Toast, Badge backgrounds
  • Token Name: warning.surface.initial