Status badge

Status badges are visual indicators used to highlight an item's status for quick recognition.

View in Figma View in Storybook View in Github

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

For general guidance on content, go to the TFTM content patterns.

Label examples

Some common examples of labels for each tone.

Open in Playroom, opens in a new tab

<Flex flexWrap="wrap" gap={1}>
	<Stack gap={0.5} alignItems="flex-start">
		<StatusBadge tone="success" label="Approved" />
		<StatusBadge tone="success" label="Accepted" />
		<StatusBadge tone="success" label="Online" />
		<StatusBadge tone="success" label="Open" />
		<StatusBadge tone="success" label="Available" />
		<StatusBadge tone="success" label="Success" />
	</Stack>

	<Stack gap={0.5} alignItems="flex-start">
		<StatusBadge tone="info" label="In progress" />
		<StatusBadge tone="info" label="Pending" />
		<StatusBadge tone="info" label="New" />
	</Stack>

	<Stack gap={0.5} alignItems="flex-start">
		<StatusBadge tone="warning" label="Due" />
		<StatusBadge tone="warning" label="Alert" />
		<StatusBadge tone="warning" label="Attention" />
	</Stack>

	<Stack gap={0.5} alignItems="flex-start">
		<StatusBadge tone="error" label="Rejected" />
		<StatusBadge tone="error" label="Outage" />
		<StatusBadge tone="error" label="Overdue" />
		<StatusBadge tone="error" label="Error" />
	</Stack>

	<Stack gap={0.5} alignItems="flex-start">
		<StatusBadge tone="neutral" label="Draft" />
	</Stack>
</Flex>

Edit this page