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.

High emphasis

Open in Playroom, opens in a new tab

<Flex flexDirection="column" gap={1}>
	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="successHigh" label="Accepted" />
		<StatusBadge tone="successHigh" label="Approved" />
		<StatusBadge tone="successHigh" label="Completed" />
		<StatusBadge tone="successHigh" label="Success" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="errorHigh" label="Error" />
		<StatusBadge tone="errorHigh" label="Rejected" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="warningHigh" label="Alert" />
		<StatusBadge tone="warningHigh" label="Warning" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="infoHigh" label="Active" />
		<StatusBadge tone="infoHigh" label="Departed" />
		<StatusBadge tone="infoHigh" label="Information requested" />
		<StatusBadge tone="infoHigh" label="Updated" />
	</Flex>
</Flex>

Medium emphasis

Open in Playroom, opens in a new tab

<Flex flexDirection="column" gap={1}>
	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="successMedium" label="Available" />
		<StatusBadge tone="successMedium" label="Completed" />
		<StatusBadge tone="successMedium" label="Downloaded" />
		<StatusBadge tone="successMedium" label="Online" />
		<StatusBadge tone="successMedium" label="Open" />
		<StatusBadge tone="successMedium" label="Requested" />
		<StatusBadge tone="successMedium" label="Submitted" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="errorMedium" label="Cancelled" />
		<StatusBadge tone="errorMedium" label="Overdue" />
		<StatusBadge tone="errorMedium" label="Revoked" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="warningMedium" label="Attention" />
		<StatusBadge tone="warningMedium" label="Expired" />
		<StatusBadge tone="warningMedium" label="Not submitted" />
		<StatusBadge tone="warningMedium" label="On hold" />
		<StatusBadge tone="warningMedium" label="Paused" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="infoMedium" label="Active" />
		<StatusBadge tone="infoMedium" label="Departed" />
		<StatusBadge tone="infoMedium" label="Information requested" />
		<StatusBadge tone="infoMedium" label="Updated" />
	</Flex>
</Flex>

Low emphasis

Open in Playroom, opens in a new tab

<Flex flexDirection="column" gap={1}>
	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="successLow" label="Active" />
		<StatusBadge tone="successLow" label="Booked" />
		<StatusBadge tone="successLow" label="To be added" />
		<StatusBadge tone="successLow" label="Submnitted" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="errorLow" label="Deleted" />
		<StatusBadge tone="errorLow" label="Not booked" />
		<StatusBadge tone="errorLow" label="To be removed" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="warningLow" label="Attention" />
		<StatusBadge tone="warningLow" label="Warning" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="infoLow" label="To be updated" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="unknownLow" label="Unknown" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="notStartedLow" label="Not requested" />
		<StatusBadge tone="notStartedLow" label="Not started" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="inProgressLow" label="Assessing" />
		<StatusBadge tone="inProgressLow" label="Draft" />
		<StatusBadge tone="inProgressLow" label="In progress" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="cannotStartLow" label="Cannot start yet" />
		<StatusBadge tone="cannotStartLow" label="On hold" />
		<StatusBadge tone="cannotStartLow" label="Withdrawn" />
	</Flex>

	<Flex flexWrap="wrap" gap={1}>
		<StatusBadge tone="pausedLow" label="Paused" />
	</Flex>
</Flex>

Edit this page