Status Light

The default status light is used to visually indicate a status of an object.

<StatusLight>Billing Status</StatusLight>

Status light can also be used without the label.

<StatusLight/>

Statuses

Default

The default status state.

<StatusLight>Billing Status</StatusLight>

Info

The Neutral status state.

<StatusLight color="info">Billing Status</StatusLight>

Success

The success state.

<StatusLight color="success">Billing Status</StatusLight>

Warning

Warning, likely requests user action.

<StatusLight color="warning">Billing Status</StatusLight>

Critical

Critical or error, likely needs user action.

<StatusLight color="critical">Billing Status</StatusLight>

Variations

Action

When the element has onClick, onMouseOver, or href it will be in actionable state.

<StatusLight href="https://www.servicetitan.com/">Billing Status</StatusLight>

Disabled

Disabled states, non-interactive.

<StatusLight disabled>Billing Status</StatusLight>

Full

Extends to full width of the parent container.

<StatusLight full>Billing Status</StatusLight>

Split

Splits the dot and the label to end to end of its allowed width.

<StatusLight split full>Billing Status</StatusLight>

Reverse

Reverse states.

<StatusLight reverse>Billing Status</StatusLight>

Pulsing

Dot pulses for higher attention from user. eg) New item, Critical state, error that is blocking a job etc..

<StatusLight pulsing>Billing Status</StatusLight>

Label(children)

Label can be customized. For example, adding multiple text object to create double line, etc..

Can add anything to the children as label

<StatusLight color="critical">
        <BodyText size="xsmall" el='span' bold subdued className="tt-uppercase">Billing Status</BodyText>
        Past Due
    </StatusLight>

Best Practices

• Status light should be used to help users read object's status fast.
• Status light vs Tag: Status light is to show state and tags are used to categorize.

Importing

import { StatusLight } from '@servicetitan/design-system';