Props
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 padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex gap={{ column: 0, row: 1 }}> <Status accessibilityLabel="This item has a problem" type="problem" /> <Text weight="bold" size="300"> Dynamic re-targeting </Text> </Flex> </Box> ); }
import { Box, Flex, Status, Text } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <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 padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex direction="column" gap={{ column: 4, row: 0 }}> <Status type="unstarted" title="Unstarted" /> <Status type="queued" title="Queued" /> <Status type="inProgress" title="In progress" /> <Status type="halted" title="Halted" /> <Status type="locked" title="Locked" /> <Status type="ok" title="OK" /> <Status type="canceled" title="Canceled" /> <Status type="warning" title="Warning" /> <Status type="problem" title="Problem" /> </Flex> </Box> ); }
import { Box, Status } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Status type="warning" title="Warning" subtext="Updated 2 days ago" /> </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. |