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>
<sp-status-light variant="cyan">cyan 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