1.7.0 • Published 25 days ago

@spectrum-web-components/status-light v1.7.0

Weekly downloads
79
License
Apache-2.0
Repository
github
Last release
25 days ago

Overview

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

See it on NPM! How big is this package in your project? Try it on Stackblitz

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';

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-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

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-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-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>

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
1.6.0

2 months ago

1.4.1-beta.0

3 months ago

1.5.0

3 months ago

1.3.0-beta.1

4 months ago

1.3.0-beta.2

4 months ago

1.3.0-beta.3

4 months ago

1.3.0-beta.4

4 months ago

1.3.0-beta.5

4 months ago

1.3.0-beta.6

4 months ago

1.3.0-beta.0

4 months ago

1.4.0

3 months ago

1.5.1-beta.0

3 months ago

1.1.0-beta.50

7 months ago

1.1.0-beta.51

7 months ago

1.1.0-beta.54

7 months ago

1.1.0-beta.55

7 months ago

1.1.0-beta.52

7 months ago

1.1.0-beta.53

7 months ago

1.4.0-beta.0

4 months ago

1.3.0

4 months ago

1.6.0-beta.0

3 months ago

1.2.0

4 months ago

1.1.0-beta.10

8 months ago

1.1.0-beta.11

8 months ago

1.1.0-beta.14

8 months ago

1.1.0-beta.15

8 months ago

1.1.0-beta.12

8 months ago

1.1.0-beta.13

8 months ago

1.1.0-beta.18

8 months ago

1.1.0-beta.19

8 months ago

1.3.0-testing.0

4 months ago

1.1.0-beta.16

8 months ago

1.1.0-beta.17

8 months ago

1.1.0-beta.9

8 months ago

1.1.0-beta.8

8 months ago

1.1.0-beta.7

8 months ago

1.1.0-beta.2

8 months ago

1.1.0-beta.21

8 months ago

1.1.0-beta.6

8 months ago

1.1.0-beta.22

8 months ago

1.1.0-beta.5

8 months ago

1.1.0-beta.4

8 months ago

1.1.0-beta.20

8 months ago

1.1.0-beta.3

8 months ago

1.1.0-beta.25

8 months ago

1.1.0-beta.26

8 months ago

1.1.0-beta.23

8 months ago

1.1.0-beta.24

8 months ago

1.1.0-beta.29

8 months ago

1.1.0-beta.27

8 months ago

1.1.0-beta.28

8 months ago

1.1.1

5 months ago

1.1.0

5 months ago

1.1.2

5 months ago

1.1.0-beta.32

8 months ago

1.1.0-beta.33

8 months ago

1.1.0-beta.30

8 months ago

1.1.0-beta.31

8 months ago

1.1.0-beta.36

8 months ago

1.1.0-beta.37

8 months ago

1.1.0-beta.34

8 months ago

1.1.0-beta.35

8 months ago

1.1.0-beta.38

8 months ago

1.1.0-beta.39

7 months ago

1.3.1-beta.0

4 months ago

1.1.0-beta.40

7 months ago

1.1.0-beta.43

7 months ago

1.1.0-beta.44

7 months ago

1.1.0-beta.41

7 months ago

1.1.0-beta.42

7 months ago

1.1.0-beta.47

7 months ago

1.1.0-beta.48

7 months ago

1.1.0-beta.45

7 months ago

1.1.0-beta.46

7 months ago

1.1.0-beta.49

7 months ago

1.2.0-beta.9

4 months ago

1.0.2

7 months ago

1.2.0-beta.8

5 months ago

1.0.1

8 months ago

1.0.3

7 months ago

1.2.0-beta.1

5 months ago

1.2.0-beta.0

5 months ago

1.2.0-beta.3

5 months ago

1.2.0-beta.2

5 months ago

1.2.0-beta.5

5 months ago

1.2.0-beta.4

5 months ago

1.2.0-beta.7

5 months ago

1.2.0-beta.6

5 months ago

1.7.0

25 days ago

1.5.0-beta.0

3 months ago

1.2.0-beta.16

4 months ago

1.2.0-beta.15

4 months ago

1.2.0-beta.18

4 months ago

1.2.0-beta.17

4 months ago

1.2.0-beta.12

4 months ago

1.2.0-beta.11

4 months ago

1.2.0-beta.14

4 months ago

1.2.0-beta.13

4 months ago

1.6.1-beta.0

2 months ago

1.2.0-beta.10

4 months ago

1.2.0-beta.19

4 months ago

1.0.0-rc.9

8 months ago

1.0.0-rc.7

8 months ago

1.0.0-rc.8

8 months ago

1.0.0-rc.5

8 months ago

1.0.0-rc.6

8 months ago

1.0.0-rc.10

8 months ago

1.0.0-rc.3

8 months ago

1.0.0-rc.4

8 months ago

1.0.0-rc.1

8 months ago

1.0.0-rc.2

8 months ago

0.50.0-beta.11

8 months ago

0.50.0-beta.12

8 months ago

0.50.0-beta.10

8 months ago

1.1.0-beta.1

8 months ago

1.1.0-beta.0

8 months ago

0.50.0-beta.9

8 months ago

0.50.0-beta.8

8 months ago

0.50.0-beta.7

8 months ago

0.50.0-beta.6

8 months ago

0.50.0-beta.5

8 months ago

0.50.0-beta.4

8 months ago

1.0.0

8 months ago

0.50.0-beta.3

8 months ago

0.50.0-beta.2

8 months ago

1.0.0-rc.0

9 months ago

0.50.0-beta.1

9 months ago

0.49.0-beta.2

9 months ago

0.50.0-beta.0

9 months ago

0.49.0

9 months ago

0.49.0-beta.1

9 months ago

0.48.0-beta.0

9 months ago

0.48.0-beta.1

9 months ago

0.48.0-beta.2

9 months ago

0.49.0-beta.0

9 months ago

0.48.1

9 months ago

0.43.0

1 year ago

0.44.0

12 months ago

0.45.0

11 months ago

0.42.5

1 year ago

0.48.0

10 months ago

0.46.0

11 months ago

0.47.1

10 months ago

0.47.2

10 months ago

0.47.0

11 months ago

0.42.4

1 year ago

0.42.3

1 year ago

0.42.2

1 year ago

0.42.1

1 year ago

0.42.0

1 year ago

0.41.2

1 year ago

0.41.1

1 year ago

0.41.0

1 year ago

0.40.5

1 year ago

0.40.4

1 year ago

0.40.3

1 year ago

0.40.2

2 years ago

0.40.1

2 years ago

0.36.0

2 years ago

0.40.0

2 years ago

0.35.1-rc.15

2 years ago

0.37.0

2 years ago

0.34.1-rc.0

2 years ago

0.35.1-rc.25

2 years ago

0.35.1-rc.26

2 years ago

0.35.1-rc.24

2 years ago

0.38.0

2 years ago

0.35.1-rc.34

2 years ago

0.34.0

2 years ago

0.35.1-rc.43

2 years ago

0.35.1-rc.41

2 years ago

0.39.1

2 years ago

0.39.0

2 years ago

0.35.0

2 years ago

0.39.4

2 years ago

0.39.3

2 years ago

0.39.2

2 years ago

0.31.1-react.21

2 years ago

0.32.0

2 years ago

0.31.1-react.3

2 years ago

0.31.1-react.1

2 years ago

0.31.1-react.2

2 years ago

0.33.2

2 years ago

0.33.0

2 years ago

0.30.0

2 years ago

0.31.0

2 years ago

0.11.9

2 years ago

0.11.10

2 years ago

0.11.11

2 years ago

0.11.7-react.75

2 years ago

0.11.8

2 years ago

0.11.7-react.50

2 years ago

0.11.7

2 years ago

0.11.7-react.48

2 years ago

0.11.7-react.49

2 years ago

0.11.4

3 years ago

0.11.5

2 years ago

0.11.6

2 years ago

0.11.4-react.54

3 years ago

0.11.7-react.32

2 years ago

0.11.1

3 years ago

0.11.2

3 years ago

0.11.3

3 years ago

0.11.0

3 years ago

0.10.10

3 years ago

0.10.11

3 years ago

0.10.12

3 years ago

0.11.0-devmode.0

3 years ago

0.10.9

3 years ago

0.10.7

3 years ago

0.10.8

3 years ago

0.10.6

3 years ago

0.10.4

3 years ago

0.10.5

3 years ago

0.10.4-express.9

3 years ago

0.10.2

3 years ago

0.10.3

3 years ago

0.9.1

4 years ago

0.10.1

4 years ago

0.10.0

4 years ago

0.9.1-lit-next.0

4 years ago

0.9.0

4 years ago

0.8.4-lit-next.0

4 years ago

0.8.3

4 years ago

0.8.3-lit-next.0

4 years ago

0.8.2

4 years ago

0.8.2-beta.71

4 years ago

0.8.2-alpha.69

4 years ago

0.8.2-alpha.40

4 years ago

0.8.2-alpha.1

4 years ago

0.8.1

4 years ago

0.8.1-alpha.59

4 years ago

0.8.1-alpha.1

4 years ago

0.8.0

4 years ago

0.7.6-alpha.74

4 years ago

0.7.6-alpha.73

4 years ago

0.7.6-alpha.72

4 years ago

0.7.6-alpha.61

4 years ago

0.7.6-alpha.27

4 years ago

0.7.6-alpha.0

4 years ago

0.7.5

4 years ago

0.7.4

4 years ago

0.7.4-alpha.26

4 years ago

0.7.4-alpha.23

4 years ago

0.7.4-alpha.21

4 years ago

0.7.4-alpha.12

4 years ago

0.7.4-alpha.11

4 years ago

0.7.4-beta.10

4 years ago

0.7.4-beta.17

4 years ago

0.7.4-beta.16

4 years ago

0.7.4-beta.15

4 years ago

0.7.4-beta.14

4 years ago

0.7.4-beta.13

4 years ago

0.7.4-beta.12

4 years ago

0.7.4-beta.11

4 years ago

0.7.4-alpha.17

4 years ago

0.7.4-alpha.9

4 years ago

0.7.3

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.1-alpha.70

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.0-alpha.40

4 years ago

0.4.4-alpha.178

4 years ago

0.5.0

4 years ago

0.4.4-alpha.169

4 years ago

0.4.4-alpha.85

5 years ago

0.4.4-alpha.84

5 years ago

0.4.4-alpha.60

5 years ago

0.4.3-alpha.0

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.2-beta.17

5 years ago

0.4.2-alpha.17

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.1-alpha.95

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.7-alpha.38

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.5-alpha.11

5 years ago

0.2.4

5 years ago

0.2.3

5 years ago

0.2.2

5 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago