sp-status-light

NPM 1.4.0

View Storybook

Try it on webcomponents.dev
Overview 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>