sp-status-light

NPM 1.7.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 Medium 
<sp-status-light size="m" variant="positive">approved</sp-status-light>
 Large Extra Large

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

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