Status Indicator

Status Indicator communicates the state of an object.

In progress

import {StatusIndicator} from "@nulogy/components";

<StatusIndicator>In progress</StatusIndicator>

Use to

  • Show a progression through the life cycle stages of an object (Started, In progress, In review, Completed, ...)
  • Compare objects qualitatively (Example: Good, Bad, Quarantined, ...)
  • Monitor the number of quantifiable characteristics of an object (time, materials). (Example: On time, Late, Early, Out of stock, Running low, ...)

Variations

Neutral

Used for neutral states and states that indicate progression. (Example: Staring, In progress, Pending ...)

In progress

<StatusIndicator>In progress</StatusIndicator>

Informative

Used for indicating the objects that underwent a change. (Example: New, Updated, ...)

New

<StatusIndicator type="informative">Informative</StatusIndicator>

Success

Used for optimistic and positive statuses. (Example: 2 days early, Good, On track ...)

2 days early

<StatusIndicator type="success">2 days early</StatusIndicator>

Danger

Used for statuses that indicate failure that may or may not be in your control. (Example: Canceled, Bad, Late ...)

Canceled

<StatusIndicator type="danger">Canceled</StatusIndicator>

Warning

Used for statuses that require attention in order to prevent failure. (Example: At risk, ...)

At risk

<StatusIndicator type="warning">At risk</StatusIndicator>

Quiet

Used for secondary states when 2 statuses are combined.

Quiet

<StatusIndicator type="quiet">Quiet</StatusIndicator>

Props

NameTypeDefaultDescription

type

string

neutral

The type of Status Indicator. Accepts neutral, informative, danger, warning, success, and quiet.

The StatusIndicator component has access to space, typography, and flexbox style props. See the style prop documentation for a full list of available props.