sp-status-light
Attributes and Properties #
disabled
disabled
boolean
false
variant
variant
| 'negative' | 'notice' | 'positive' | 'info' | 'neutral' | 'yellow' | 'fuchsia' | 'indigo' | 'seafoam' | 'chartreuse' | 'magenta' | 'celery' | 'purple'
'info'
Slots #
default slot
Description #
An <sp-status-light>
is a great way to convey semantic meaning, such as statuses and categories.
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';
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 #
There are many variants to choose from in Spectrum. The variant
attribute controls the main variant of the status light, and neutral
being the default. Following are the supported variants:
- positive
- negative
- notice
- info
- neutral
- yellow
- fuchsia
- indigo
- seafoam
- chartreuse
- magenta
- celery
- purple
Disabled #
<sp-status-light variant="positive" disabled>disabled</sp-status-light>