Badge

Badges are used to inform customers and suppliers of the status of an object.

Default

Use to give a non-critical status update on a piece of information or action.

Neutral

Informational

Use to call out an object or action as having an important attribute.

Informational

Success

Use to indicate a successful, completed, or desirable state when it’s important to provide positive reinforcement to users.

Success

Attention

Use when something requires users’ attention but the issue isn’t critical.

Attention

Warning

Use for warnings and time-sensitive issues that require users’ attention and potential action.

Warning

Critical

Use for critical and irreversible issues that require users’ attention and potential action.

Critical

Props

  • status string

    Text that is displayed in the badge

  • type 'neutral' | 'informational' | 'success' | 'attention' | 'warning' | 'critical'

    Determines the colors used in the badge