Agriculture Design System
Beta
Design System for the Export Service

Status badge

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

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/status-badge';

Do

  • use to indicate the status of an item or its progress through a process
  • apply the 'subtle' appearance in tables to reduce visual emphasis and overall height of the parent component
  • apply the correct emphasis level to communicate the urgency or importance of the status tone.

Don’t

  • add lengthy text as the badge label. We recommend a maximum of three words
  • change tone colours or apply new colours - the default colour set has semantic meaning that matches the ARIA label and meaningful image
  • use the 'subtle' appearance outside of tables or dense parent components
  • use when colour and icon don’t convey meaning, or use when the semantic meaning of the badge, colour and icon, does not match your use case.

Status and emphasis

The tone prop combines both a status and emphasis, which sets the correct importance and severity of the Status badge by automatically applying appropriate colour, iconography and accessible descriptions.

There a nine unique tones with five levels of emphasis. All tones are available in Low emphasis but others are only available in Medium and High.

High emphasis

High emphasis Status badges use filled icons and are available in four tone colours.

Use high emphasis status badges for:

  • important system messages
  • notifications that require user action
  • conveying urgent status in lists.
Open in Playroom, opens in a new tab
<Flex flexWrap="wrap" gap={1}>
	<StatusBadge tone="successHigh" label="Success" />
	<StatusBadge tone="errorHigh" label="Error" />
	<StatusBadge tone="warningHigh" label="Warning" />
	<StatusBadge tone="infoHigh" label="Info" />
</Flex>

Medium emphasis

Medium emphasis Status badges use stroked icons and are available in five tone colours.

Use Medium emphasis status badges to:

  • convey non-urgent status in a list
  • convey an object’s progress through a process.
Open in Playroom, opens in a new tab
<Flex flexWrap="wrap" gap={1}>
	<StatusBadge tone="successMedium" label="Success" />
	<StatusBadge tone="errorMedium" label="Error" />
	<StatusBadge tone="warningMedium" label="Warning" />
	<StatusBadge tone="infoMedium" label="Info" />
</Flex>

Low emphasis

Low emphasis Status badges use stroked icons and are available in the default, neutral colour only.

Use Low emphasis status badges to:

  • convey non-urgent status in a list
  • convey an object’s progress through a process.
Open in Playroom, opens in a new tab
<Flex flexWrap="wrap" gap={1}>
	<StatusBadge tone="successLow" label="Success" />
	<StatusBadge tone="errorLow" label="Error" />
	<StatusBadge tone="warningLow" label="Warning" />
	<StatusBadge tone="infoLow" label="Info" />
	<StatusBadge tone="cannotStartLow" label="Cannot start" />
	<StatusBadge tone="inProgressLow" label="In progress" />
	<StatusBadge tone="pausedLow" label="Paused" />
	<StatusBadge tone="notStartedLow" label="Not started" />
	<StatusBadge tone="unknownLow" label="Unknown" />
</Flex>

Appearance

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

Open in Playroom, opens in a new tab
<Flex gap={2} flexDirection="column">
	<Flex flexWrap="wrap" gap={2}>
		<StatusBadge appearance="subtle" tone="successHigh" label="Success" />
		<StatusBadge appearance="subtle" tone="errorHigh" label="Error" />
		<StatusBadge appearance="subtle" tone="warningHigh" label="Warning" />
		<StatusBadge appearance="subtle" tone="infoHigh" label="Info" />
	</Flex>
	<Flex flexWrap="wrap" gap={2}>
		<StatusBadge appearance="subtle" tone="successMedium" label="Success" />
		<StatusBadge appearance="subtle" tone="errorMedium" label="Error" />
		<StatusBadge appearance="subtle" tone="warningMedium" label="Warning" />
		<StatusBadge appearance="subtle" tone="infoMedium" label="Info" />
	</Flex>
	<Flex flexWrap="wrap" gap={2}>
		<StatusBadge appearance="subtle" tone="successLow" label="Success" />
		<StatusBadge appearance="subtle" tone="errorLow" label="Error" />
		<StatusBadge appearance="subtle" tone="warningLow" label="Warning" />
		<StatusBadge appearance="subtle" tone="infoLow" label="Info" />
	</Flex>
	<Flex flexWrap="wrap" gap={2}>
		<StatusBadge
			appearance="subtle"
			tone="cannotStartLow"
			label="Cannot start"
		/>
		<StatusBadge appearance="subtle" tone="inProgressLow" label="In progress" />
		<StatusBadge appearance="subtle" tone="pausedLow" label="Paused" />
		<StatusBadge appearance="subtle" tone="notStartedLow" label="Not started" />
		<StatusBadge appearance="subtle" tone="unknownLow" label="Unknown" />
	</Flex>
</Flex>
  • 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.
Edit this page