Status Indicator
Status indicator communicates the state of a certain resource in the system.
#Guidelines
#When to use
- Indicate a system status of a certain resource.
#When not to use
- If a status indicator describes something that's customizable or was entered by a user. Status indicator should have predictable and pre-defined states.
- If a status indicator needs to be positioned near the label of the resource it's related to, use a badge instead.
#Placement
- Status indicator looks great inside a standalone "Status" column within tables.
#Content
- Prefer one or two words max.
- Avoid numbers.
#Props
Inherits margin props.
Name | Default | Description |
---|
variant | — | "success" | "error" | "processing" | "warning" | "inactive" Status indicator variant. |
children | — | ReactNode Label describing the status. |