sp-status-light

NPM 1.6.0

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

An <sp-status-light> is a great way to convey semantic meaning, such as statuses and categories. It provides visual indicators through colored dots accompanied by descriptive text.

Usage

See it on NPM! How big is this package in your project? Try it on Stackblitz

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

Anatomy

A status light consists of a colored dot indicator and a required text label. The dot's color represents the status or category, while the text provides additional context.

<sp-status-light variant="positive">approved</sp-status-light>

Options

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

Status lights come in various semantic and non-semantic variants to convey different meanings. The variant attribute controls the main variant of the status light, with neutral being the default.

Semantic 
<sp-status-light variant="neutral">
    use for default state
</sp-status-light>
<sp-status-light variant="positive">
    use for success or approval
</sp-status-light>
<sp-status-light variant="negative">
    use for error or rejection
</sp-status-light>
<sp-status-light variant="notice">
    use for warning or attention needed
</sp-status-light>
<sp-status-light variant="info">
    use for information or neutral state
</sp-status-light>
 Non-semantic 
<sp-status-light variant="yellow">yellow status</sp-status-light>
<sp-status-light variant="fuchsia">fuchsia status</sp-status-light>
<sp-status-light variant="indigo">indigo status</sp-status-light>
<sp-status-light variant="seafoam">seafoam status</sp-status-light>
<sp-status-light variant="chartreuse">chartreuse status</sp-status-light>
<sp-status-light variant="magenta">magenta status</sp-status-light>
<sp-status-light variant="celery">celery status</sp-status-light>
<sp-status-light variant="purple">purple status</sp-status-light>

States

Disabled

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.

<sp-status-light variant="positive" disabled>disabled</sp-status-light>

Accessibility

The status light component implements several accessibility features:

  • ARIA Support: When disabled, the component automatically sets aria-disabled="true".
  • Color Meaning: Colors are used in combination with text labels to ensure that status information is not conveyed through color alone.

Best Practices

  • Use semantic variants (positive, negative, notice, info, neutral) when the status has specific meaning
  • Include a clear, descriptive text label that explains the status
  • Consider the disabled state for statuses that exist but are temporarily unavailable
  • Ensure sufficient color contrast between the status light and its background

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)

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