adobeOverview
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-lightImport 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-tabs selected="m" auto label="Size Attribute Options">
<sp-tab value="s">Small</sp-tab>
<sp-tab-panel value="s"><sp-status-light size="s" variant="positive">approved</sp-status-light></sp-tab-panel>
<sp-tab value="m">Medium</sp-tab>
<sp-tab-panel value="m"><sp-status-light size="m" variant="positive">approved</sp-status-light></sp-tab-panel>
<sp-tab value="l">Large</sp-tab>
<sp-tab-panel value="l"><sp-status-light size="l" variant="positive">approved</sp-status-light></sp-tab-panel>
<sp-tab value="xl">Extra Large</sp-tab>
<sp-tab-panel value="xl"><sp-status-light size="xl" variant="positive">approved</sp-status-light></sp-tab-panel> </sp-tabs>
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-tabs selected="semantic" auto label="Variants">
<sp-tab value="semantic">Semantic</sp-tab>
<sp-tab-panel value="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></sp-tab-panel>
<sp-tab value="non-semantic">Non-semantic</sp-tab>
<sp-tab-panel value="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></sp-tab-panel> </sp-tabs>
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