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.
npm install @spectrum-web-components/status-lightAn
``
yarn add @spectrum-web-components/status-light
Import the side effectful registration of 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';
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.
`html`
#### Sizes
`html`
`html`
`html`
`html`
#### 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.
`html`
use for success or approval
use for warning or attention needed
use for information or neutral state
`html`
#### 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.
`html`
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