sp-status-light

NPM

1.1.2

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

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

1.1.2 (2025-02-12) #

Note: Version bump only for package @spectrum-web-components/status-light

1.1.1 (2025-01-29) #

Note: Version bump only for package @spectrum-web-components/status-light

1.1.0 (2025-01-29) #

Bug Fixes #

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.1 (2024-11-11) #

Note: Version bump only for package @spectrum-web-components/status-light

1.0.0 (2024-10-31) #

Note: Version bump only for package @spectrum-web-components/status-light

0.49.0 (2024-10-15) #

Note: Version bump only for package @spectrum-web-components/status-light

0.48.1 (2024-10-01) #

Note: Version bump only for package @spectrum-web-components/status-light

0.48.0 (2024-09-17) #

Note: Version bump only for package @spectrum-web-components/status-light

0.47.2 (2024-09-03) #

Note: Version bump only for package @spectrum-web-components/status-light

0.47.1 (2024-08-27) #

Note: Version bump only for package @spectrum-web-components/status-light

0.47.0 (2024-08-20) #

Note: Version bump only for package @spectrum-web-components/status-light

0.46.0 (2024-08-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.45.0 (2024-07-30) #

Note: Version bump only for package @spectrum-web-components/status-light

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/status-light

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/status-light

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/status-light

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/status-light

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/status-light

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/status-light

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/status-light

0.42.0 (2024-03-19) #

Bug Fixes #

  • styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/status-light

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/status-light

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/status-light

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/status-light

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/status-light

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/status-light

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/status-light

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/status-light

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/status-light

0.39.4 (2023-11-02) #

Bug Fixes #

  • overlay: place longpress helper content in a more accessible, less layout affecting location (dd12c23)

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/status-light

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/status-light

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/status-light

0.39.0 (2023-09-25) #

Note: Version bump only for package @spectrum-web-components/status-light

0.38.0 (2023-09-05) #

Note: Version bump only for package @spectrum-web-components/status-light

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/status-light

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/status-light

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/status-light

0.34.0 (2023-07-11) #

Note: Version bump only for package @spectrum-web-components/status-light

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/status-light

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/status-light

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/status-light

0.30.0 (2023-05-03) #

Bug Fixes #

  • correct @element jsDoc listing across library (c97a632)
  • include "type" in package.json, generate custom-elements.json (1a8d716)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • shared: make Focusable pass disabled always (a339d6f)
  • status-light: extend docs and styling for [disabled] (3d9fd16)
  • status-light: manage aria-disabled from disabled attribute (8bc9be7)
  • status-light: review comments for status-light (80caa08)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • action-button: add action button pattern (03ac00a)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • include all Dev Mode files in side effects (f70817c)
  • leverage "exports" field in package.json (321abd7)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • status-light: add status-light component (e3a5b3d)
  • status-light: update spectrum css input (e10fd45)
  • tabs: add sp-tab-panel element (b17d276)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • use @adobe/spectrum-css@2.15.1 (3918888)
  • use latest exports specification (a7ecf4b)
  • use SixedMixin to manage "size" property (8819821)

Performance Improvements #

  • use "sideEffects" listing in package.json (7271614)

Reverts #

  • Revert "chore: release new versions" (a6d655d)

0.11.11 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.10 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.9 (2023-03-22) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.8 (2023-02-23) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.7 (2023-02-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.6 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.5 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.4 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.3 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.2 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.1 (2022-10-10) #

Note: Version bump only for package @spectrum-web-components/status-light

0.11.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.10.12 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.11 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.10 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.9 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.8 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.7 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.6 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.5 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.4 (2022-03-04) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.3 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.2 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.1 (2021-12-13) #

Note: Version bump only for package @spectrum-web-components/status-light

0.10.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.9.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.9.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.8.3 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/status-light

0.8.2 (2021-08-24) #

Bug Fixes #

  • correct @element jsDoc listing across library (c97a632)

0.8.1 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/status-light

0.8.0 (2021-06-16) #

Features #

  • tabs: add sp-tab-panel element (b17d276)

0.7.5 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/status-light

0.7.4 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/status-light

0.7.3 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/status-light

0.7.2 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/status-light

0.7.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/status-light

0.7.0 (2021-03-04) #

Features #

  • use latest exports specification (a7ecf4b)

0.6.1 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.6.0 (2021-01-21) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • status-light: update spectrum css input (e10fd45)

0.5.0 (2021-01-13) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features #

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • action-button: add action button pattern (03ac00a)
  • status-light: update spectrum css input (e10fd45)

0.4.3 (2020-10-12) #

Note: Version bump only for package @spectrum-web-components/status-light

0.4.2 (2020-10-12) #

Bug Fixes #

  • include default export in the "exports" fields (f32407d)

0.4.1 (2020-09-25) #

Bug Fixes #

  • update side effect listings (8160d3a)

0.4.0 (2020-08-31) #

Features #

  • update to Spectrum CSS v3.0.0 (e8b3d8f)

0.3.1 (2020-08-19) #

Note: Version bump only for package @spectrum-web-components/status-light

0.3.0 (2020-07-17) #

Bug Fixes #

  • status-light: manage aria-disabled from disabled attribute (8bc9be7)

Features #

  • leverage "exports" field in package.json (321abd7)

0.2.6 (2020-06-08) #

Note: Version bump only for package @spectrum-web-components/status-light

0.2.5 (2020-04-16) #

Performance Improvements #

  • use "sideEffects" listing in package.json (7271614)

0.2.4 (2020-04-07) #

Bug Fixes #

  • status-light: extend docs and styling for disabled

0.2.3 (2020-03-11) #

Note: Version bump only for package @spectrum-web-components/status-light

0.2.2 (2020-01-06) #

Note: Version bump only for package @spectrum-web-components/status-light

0.2.1 (2019-11-27) #

Bug Fixes #

  • include "type" in package.json, generate custom-elements.json (1a8d716)

0.2.0 (2019-11-19) #

Features #

  • use @adobe/spectrum-css@2.15.1 (3918888)

0.1.1 (2019-11-01) #

Bug Fixes #

  • shared: make Focusable pass disabled always (a339d6f)

0.1.0 (2019-10-23) #

Bug Fixes #

  • status-light: review comments for status-light (80caa08)

Features #

  • status-light: add status-light component (e3a5b3d)

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>