sp-status-light

Examples API Changelog

Description #

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

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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 Medium
<sp-status-light size="m" variant="positive">approved</sp-status-light>
Large Extra Large

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>