Status
Pilot

Status is an indicator with an icon that provides information to a user.

Updated 2 days ago

Props

Component props
Name	Type	Default
`type` Required	`"unstarted" \| "inProgress" \| "halted" \| "ok" \| "problem" \| "canceled" \| "warning"`	-
	The type of status to display.
`accessibilityLabel`	`string`	-
	If not using `title`, provide an accessibility label to give the user context about the icon. Be sure to localize the label.
`subtext`	`string`	-
	Additional contextual information around the status. Only for use with `title`. See localization to learn more.
`title`	`string`	-
	A label to reinforce the meaning of the status icon. See localization to learn more.

Usage guidelines

When to Use

To describe the status of an individual element, such an an item in a list or a row in a table.

When Not to Use

To describe surface-level errors. Use Callout instead.
To describe whether a numeric value is going up or down. Use Datapoint instead.

Accessibility

Icons are a great way to help users who have difficulties with reading, focus attention, and low vision impairments. For such use cases, Status can be used without accompanying title text.

ARIA attributes

If Status appears without title text, accessibilityLabel should be used to provide a text description for screen readers to announce and communicate the represented icon, as shown in the first example.

Avoid using the generic words like "image" or "icon"; instead, use verbs that describe the meaning of the icon, for example: "there is a problem with this item".

If using title to describe what the icon represents, accessibilityLabel does not need to be provided, as shown in the second example.

Dynamic retargeting

<Flex gap={1}>
  <Status accessibilityLabel="This item has a problem" type="problem" />
  <Text weight="bold" size="lg">Dynamic retargeting</Text>
</Flex>

<Flex gap={1}>
  <Status accessibilityLabel="This item has a problem" type="problem" />
  <Text weight="bold" size="lg">Dynamic retargeting</Text>
</Flex>

This item has a problem

Dynamic retargeting

<Flex alignItems="end" direction="column" gap={1}>
  <Status title="This item has a problem" type="problem" />
  <Text align="center" weight="bold">
    Dynamic retargeting
  </Text>
</Flex>

<Flex alignItems="end" direction="column" gap={1}>
  <Status title="This item has a problem" type="problem" />
  <Text align="center" weight="bold">
    Dynamic retargeting
  </Text>
</Flex>

Localization

Be sure to localize the title, subtext and accessibilityLabel props. Note that localization can lengthen text by 20 to 30 percent.

Variants

Text additions

Unstarted

In progress

Halted

Canceled

Warning

Problem

<Flex direction="column" gap={4}>
  <Status type='unstarted' title='Unstarted' />
  <Status type='inProgress' title='In progress' />
  <Status type='halted' title='Halted' />
  <Status type='ok' title='OK' />
  <Status type='canceled' title='Canceled' />
  <Status type='warning' title='Warning' />
  <Status type='problem' title='Problem' />
</Flex>

<Flex direction="column" gap={4}>
  <Status type='unstarted' title='Unstarted' />
  <Status type='inProgress' title='In progress' />
  <Status type='halted' title='Halted' />
  <Status type='ok' title='OK' />
  <Status type='canceled' title='Canceled' />
  <Status type='warning' title='Warning' />
  <Status type='problem' title='Problem' />
</Flex>

Status name