Status
Pilot

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

Updated 2 days ago

Props

Name	Type	Default
`title` Required	`string`	-
	A label to reinforce the meaning of the status icon. See localization to learn more.
`type` Required	`"unstarted" \| "inProgress" \| "halted" \| "ok" \| "problem" \| "canceled" \| "warning"`	-
	The type of status to display.
`subtext`	`string`	-
	Additional contextual information around the status. 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.

Localization

Be sure to localize the title and subtext 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