sp-status-light

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
disabled disabled boolean false 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.
size size ElementSize
variant variant | 'negative' | 'notice' | 'positive' | 'info' | 'neutral' | 'yellow' | 'fuchsia' | 'indigo' | 'seafoam' | 'chartreuse' | 'magenta' | 'celery' | 'purple' 'info' The visual variant to apply to this status light.

Slots #

Name Description
default slot text label of the Status Light

CSS Custom Properties #

Name Default
--spectrum-statuslight-l-info-dot-size undefined
--spectrum-statuslight-l-info-height var(--spectrum-global-dimension-size-500)
--spectrum-statuslight-l-info-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-statuslight-l-info-text-gap var(--spectrum-global-dimension-size-130)
--spectrum-statuslight-l-info-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-statuslight-l-info-text-size var(--spectrum-global-dimension-font-size-200)
--spectrum-statuslight-m-celery-dot-color var(--spectrum-global-color-celery-400)
--spectrum-statuslight-m-chartreuse-dot-color var(--spectrum-global-color-chartreuse-400)
--spectrum-statuslight-m-fuchsia-dot-color var(--spectrum-global-color-fuchsia-400)
--spectrum-statuslight-m-indigo-dot-color var(--spectrum-global-color-indigo-400)
--spectrum-statuslight-m-info-dot-color var(--spectrum-semantic-informative-status-color)
--spectrum-statuslight-m-info-dot-color-disabled var(--spectrum-global-color-gray-400)
--spectrum-statuslight-m-info-dot-size var(--spectrum-global-dimension-size-100)
--spectrum-statuslight-m-info-height var(--spectrum-global-dimension-size-400)
--spectrum-statuslight-m-info-text-color var(--spectrum-alias-text-color)
--spectrum-statuslight-m-info-text-color-disabled var(--spectrum-alias-text-color-disabled)
--spectrum-statuslight-m-info-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-statuslight-m-info-text-gap var(--spectrum-global-dimension-size-125)
--spectrum-statuslight-m-info-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-statuslight-m-info-text-size var(--spectrum-global-dimension-font-size-100)
--spectrum-statuslight-m-magenta-dot-color var(--spectrum-global-color-magenta-400)
--spectrum-statuslight-m-negative-dot-color var(--spectrum-semantic-negative-status-color)
--spectrum-statuslight-m-neutral-dot-color var(--spectrum-global-color-gray-500)
--spectrum-statuslight-m-neutral-text-color var(--spectrum-alias-label-text-color)
--spectrum-statuslight-m-notice-dot-color var(--spectrum-semantic-notice-status-color)
--spectrum-statuslight-m-positive-dot-color var(--spectrum-semantic-positive-status-color)
--spectrum-statuslight-m-purple-dot-color var(--spectrum-global-color-purple-400)
--spectrum-statuslight-m-seafoam-dot-color var(--spectrum-global-color-seafoam-400)
--spectrum-statuslight-m-yellow-dot-color var(--spectrum-global-color-yellow-400)
--spectrum-statuslight-s-info-dot-size var(--spectrum-global-dimension-static-size-100)
--spectrum-statuslight-s-info-height var(--spectrum-global-dimension-size-300)
--spectrum-statuslight-s-info-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-statuslight-s-info-text-gap var(--spectrum-global-dimension-size-115)
--spectrum-statuslight-s-info-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-statuslight-s-info-text-size var(--spectrum-global-dimension-font-size-75)
--spectrum-statuslight-xl-info-dot-size undefined
--spectrum-statuslight-xl-info-height var(--spectrum-global-dimension-size-600)
--spectrum-statuslight-xl-info-text-font-weight var(--spectrum-alias-body-text-font-weight)
--spectrum-statuslight-xl-info-text-gap var(--spectrum-global-dimension-size-160)
--spectrum-statuslight-xl-info-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-statuslight-xl-info-text-size var(--spectrum-global-dimension-font-size-300)

Description #

An <sp-status-light> is a great way to convey semantic meaning, such as statuses and categories.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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 #

Small
<sp-status-light size="s" variant="positive">approved</sp-status-light>
Medium
<sp-status-light size="m" variant="positive">approved</sp-status-light>
Large
<sp-status-light size="l" variant="positive">approved</sp-status-light>
Extra Large
<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>