@spectrum-web-components/status-light

Description

An <sp-status-light> is a great way to convey semantic meaning, such as statuses and categories.

Usage

yarn add @spectrum-web-components/status-light

Import the side effectful registration of <sp-status-light> via:

import '@spectrum-web-components/status-light/sp-status-light.js';

When looking to leverage the StatusLight base class as a type and/or for extension purposes, do so via:

import { StatusLight } from '@spectrum-web-components/status-light';

Sizes

Small

<sp-status-light size="s" variant="positive">approved</sp-status-light>

Medium

<sp-status-light size="m" variant="positive">approved</sp-status-light>

Large

<sp-status-light size="l" variant="positive">approved</sp-status-light>

Extra Large

<sp-status-light size="xl" variant="positive">approved</sp-status-light>

Variants

There are many variants to choose from in Spectrum. The variant attribute controls the main variant of the status light, and neutral being the default. Following are the supported variants:

• positive
• negative
• notice
• info
• neutral
• yellow
• fuchsia
• indigo
• seafoam
• chartreuse
• magenta
• celery
• purple

Disabled

<sp-status-light variant="positive" disabled>disabled</sp-status-light>