Status Indicator

Status indicator communicates the state of a certain resource in the system.

Connected
Processing
Failed
Warning
Disabled
import { StatusIndicator } from "@hightouchio/ui";

<Box display="flex" flexDirection="column" gap={2}>
<StatusIndicator variant="success">Connected</StatusIndicator>
<StatusIndicator variant="processing">Processing</StatusIndicator>
<StatusIndicator variant="error">Failed</StatusIndicator>
<StatusIndicator variant="warning">Warning</StatusIndicator>
<StatusIndicator variant="inactive">Disabled</StatusIndicator>
</Box>;

#

#

  • Indicate a system status of a certain resource.

#

  • 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.

#

  • Status indicator looks great inside a standalone "Status" column within tables.

#

  • Prefer one or two words max.
  • Avoid numbers.

#

Inherits margin props.

NameDefaultDescription
variant

"success" | "error" | "processing" | "warning" | "inactive"

Status indicator variant.

children

ReactNode

Label describing the status.