@spectrum-web-components/status-light

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@spectrum-web-components/status-light
7071450.11.02 months ago3 years agoMinified + gzip package size for @spectrum-web-components/status-light in KB

Readme

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