Displays a status indicator with an icon and label.
<Flag state="enabled" label="Active" />
state
'enabled' | 'error' | 'warning' | 'disabled'
label
string
loading
boolean
false
This component is based on the Flex, Marker, and Text components. View source
Flex
Marker
Text
<Flag state="enabled" label="Enabled" />
<Flag state="error" label="Blocked" />
<Flag state="warning" label="Warning" />
The disabled state uses a circle-backslash icon and does not use a marker background.
disabled
<Flag state="disabled" label="Disabled" />
Use the loading prop to show a skeleton placeholder while loading data.
<Flag state="enabled" label="Loading integration" loading />