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';