sp-status-light

NPM 1.6.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 
<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>

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

Patch Changes

  • #5349 a9727d2 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies []:

    • @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/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)