sp-status-light

Examples API

Attributes and Properties #

Property Attribute Type Default Description disabled disabled boolean false A status light in a disabled state shows that a status exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a status may become available later. variant variant | 'negative' | 'notice' | 'positive' | 'info' | 'neutral' | 'yellow' | 'fuchsia' | 'indigo' | 'seafoam' | 'chartreuse' | 'magenta' | 'celery' | 'purple' 'info' The visual variant to apply to this status light.

Slots #

Name Description default slot text label of the Status Light

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>