Components

Badge

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
webComponent
:Ready

A badge indicates the status of an entity and can evolve at any time.

Types

The badge component is available in 5 states. Each state corresponds with a defined status.

Colour themeStatusPreview
InformationNew, To review, Draft
SuccessValidated, Online status
WarningNon-critical error, Incomplete task, Required action
DangerCritical error, Invalid data, Offline status, Rejected task, Recently cancelled
NeutralArchived, Disabled, Draft, Long ago cancelled
Good to know

Depending on the context, Draft status can use the Information or neutral colour theme.

Behaviours

Content

States should be easy to read and defined by a generic word. If you have to give more information, don't hesitate to accompany badges with icon tooltip or trigger a modal with components like a button, link, icon, etc.

Badge-Tooltip

Badge-Options

Do's and Don'ts

Always use a short label inside the badge.
Don't override the colours. They are defined by their status.
Don't use several badges for the same element. It can only have one status.
Never use a badge as a clickable element. A badge should be used to display status information.