Badge

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Overview
  2. Status
  3. Sample element
  4. When to use
  5. Status checklist
  1. Overview
  2. Status
  3. Sample element
  4. When to use
  5. Status checklist

Overview

A badge is used to annotate other information like a label or an object name.

  • neutral - Indicates generic information or a message with no severity.
  • danger - Indicates a danger state, like an error that is blocking a user from completing a task.
  • warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
  • caution - Indicates an action or notice which should immediately draw the attention
  • info - Indicates helpful information or a message with very little to no severity.
  • success - Indicates a success state, like if a process was completed without errors.

Status

Sample element

7 24 240 999

When to use

  • When you need to reflect counts like number of objects, events, or unread items

Status checklist

Edit this page on GitHub