@spectrum-web-components/status-light NPM

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

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

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

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

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

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

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

<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

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @spectrum-web-components/bundle @swc-react/status-light

1.6.0

4 months ago

0.0.0-20250211061642

6 months ago

0.0.0-20241211110529

8 months ago

1.7.0-snapshot.20250519151006

3 months ago

8 months ago

5 months ago

4 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

5 months ago

6 months ago

6 months ago

5 months ago

4 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

5 months ago

1.7.0-snapshot.20250519143559

3 months ago

8 months ago

5 months ago

5 months ago

4 months ago

6 months ago

6 months ago

1.7.0-snapshot.20250609112703

2 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

6 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

6 months ago

9 months ago

6 months ago

9 months ago

1.6.1-preview-2d9fabee.20250507183133

3 months ago

6 months ago

8 months ago

8 months ago

6 months ago

6 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

2 months ago

5 months ago

8 months ago

1.7.0-snapshot.20250519200040

3 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

3 months ago

6 months ago

4 months ago

0.0.0-modal-performance-20250414163725

4 months ago

6 months ago

6 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.11.6-overlay-warning.19

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago