Props
Usage guidelines
- To describe the status of an individual element, such an an item in a list or a row in a table.
- To describe surface-level errors. Use BannerCallout instead.
- To describe whether a numeric value is going up or down. Use Datapoint instead.
Best practices
Use Status to communicate a step in a workflow or the state of an item.
Use SVGs or images that resemble the Status’ symbols to denote status.
Place Status close to its subject to provide context and reference. It can be placed as an inline element or paired side by side as needed.
Place Status far away from its subject.
Use title
when the status it represents is unique, specific and critical for the user to know.
Use Status' subText
to display extraneous messaging.
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: "Upload in progress".
If using title
to describe what the icon represents, accessibilityLabel
does not need to be provided, as shown in the second example.
import { Box, Flex, Status, Text } from 'gestalt'; export default function Example() { return ( <Box alignItems="center" display="flex" height="100%" justifyContent="center" padding={8} > <Flex gap={{ column: 0, row: 1 }}> <Status accessibilityLabel="This item has a problem" type="problem" /> <Text size="300" weight="bold"> Dynamic re-targeting </Text> </Flex> </Box> ); }
import { Box, Flex, Status, Text } from 'gestalt'; export default function Example() { return ( <Box alignItems="center" display="flex" height="100%" justifyContent="center" padding={8} > <Flex alignItems="end" direction="column" gap={{ column: 1, row: 0 }}> <Status title="This item has a problem" type="problem" /> <Text align="center" weight="bold"> Dynamic re-targeting </Text> </Flex> </Box> ); }
Localization
Be sure to localize all text strings. Note that localization can lengthen text by 20 to 30 percent.
Variants
Text additions
import { Box, Flex, Status } from 'gestalt'; export default function Example() { return ( <Box alignItems="center" display="flex" height="100%" justifyContent="center" padding={8} > <Flex direction="column" gap={{ column: 4, row: 0 }}> <Status title="Unstarted" type="unstarted" /> <Status title="Queued" type="queued" /> <Status title="In progress" type="inProgress" /> <Status title="Halted" type="halted" /> <Status title="Locked" type="locked" /> <Status title="OK" type="ok" /> <Status title="Canceled" type="canceled" /> <Status title="Warning" type="warning" /> <Status title="Problem" type="problem" /> </Flex> </Box> ); }
import { Box, Status } from 'gestalt'; export default function Example() { return ( <Box alignItems="center" display="flex" height="100%" justifyContent="center" padding={8} > <Status subtext="Updated 2 days ago" title="Warning" type="warning" /> </Box> ); }
Component quality checklist
Quality item | Status | Status description |
---|---|---|
Figma Library | Ready | Component is available in Figma for web and mobile web. |
Responsive Web | Ready | Component responds to changing viewport sizes in web and mobile web. |
Related
Icon
Icon should be used to display a symbol that does not represent the state or status of an item.
Badge
Use Badge to label or mark an item with a designation or category.
BannerCallout
Use BannerCallout to communicate page-level status, such as an error, and to provide actionable next steps.