Status badge

import { ... } from '@ag.ds-next/react/status-badge';

Do

• use to indicate the status of a task or process
• use to help users differentiate between multiple statuses
• apply the subtle weight in tables to reduce visual emphasis and overall height of the parent component

Don't

• use status badge without an icon
• change the colours or create new ones
• use the subtle weight outside of tables or dense parent components
• use when colour and icon don't convey meaning.

Tone

Choosing a tone for Status badge allows the user to understand the importance and severity of the message at a glance.

The five supported tones are info, success, error, warning and neutral.

<Flex flexWrap="wrap" gap={1}>
	<StatusBadge tone="info" label="In progress" />
	<StatusBadge tone="success" label="Resolved" />
	<StatusBadge tone="error" label="Rejected" />
	<StatusBadge tone="warning" label="Attention" />
	<StatusBadge tone="neutral" label="Draft" />
</Flex>

Weight

Apply the subtle weight in tables to reduce visual emphasis and overall height of the parent component. The subtle weight can reduce complexity and repetition in dense compositions where multiple status badges are applied.

<Flex flexWrap="wrap" gap={2}>
	<StatusBadge weight="subtle" tone="info" label="In progress" />
	<StatusBadge weight="subtle" tone="success" label="Resolved" />
	<StatusBadge weight="subtle" tone="error" label="Rejected" />
	<StatusBadge weight="subtle" tone="warning" label="Attention" />
	<StatusBadge weight="subtle" tone="neutral" label="Draft" />
</Flex>

Related components

• Indicator dot – Indicator dots are small decorative badge-like indicators used to call attention to an item, such as an unread message.
• Notification badge – Notification badges are visual indicators for numeric values.
• Tags – Tags classify content using keywords or labels. They are added to a web page, asset or content to help users search for related content quickly and easily.