@spectrum-web-components/status-light
v0.42.3
Published
An `<sp-status-light>` is a great way to convey semantic meaning, such as statuses and categories.
Downloads
3,120
Readme
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>