sp-badge
Attributes and Properties #
fixed
fixed
FixedValues | undefined
variant
variant
BadgeVariant
'informative'
Slots #
default slot
icon
1.0.0 (2024-10-31) #
BREAKING CHANGES #
- remove deprecated badge values (
#4742 )
0.49.0 (2024-10-15) #
Features #
- add
static-color
to replacestatic
(#4808 ) (43cf086 )
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/badge
0.48.0 (2024-09-17) #
Note: Version bump only for package @spectrum-web-components/badge
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/badge
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/badge
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/badge
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/badge
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/badge
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/badge
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/badge
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/badge
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/badge
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/badge
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/badge
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/badge
0.42.0 (2024-03-19) #
Bug Fixes #
- badge: expand and update variant availability and mod override usage (
#4162 ) (19e1a49 )
Features #
- asset: use core tokens (
99e76f4 )
0.41.2 (2024-03-05) #
Note: Version bump only for package @spectrum-web-components/badge
0.41.1 (2024-02-22) #
Note: Version bump only for package @spectrum-web-components/badge
0.41.0 (2024-02-13) #
Features #
- icon: use core tokens (
a11ef6b )
0.40.5 (2024-02-05) #
Note: Version bump only for package @spectrum-web-components/badge
0.40.4 (2024-01-29) #
Note: Version bump only for package @spectrum-web-components/badge
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/badge
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/badge
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/badge
0.40.0 (2023-11-16) #
Note: Version bump only for package @spectrum-web-components/badge
0.39.4 (2023-11-02) #
Note: Version bump only for package @spectrum-web-components/badge
0.39.3 (2023-10-18) #
Note: Version bump only for package @spectrum-web-components/badge
0.39.2 (2023-10-13) #
Note: Version bump only for package @spectrum-web-components/badge
0.39.1 (2023-10-06) #
Note: Version bump only for package @spectrum-web-components/badge
0.39.0 (2023-09-25) #
Note: Version bump only for package @spectrum-web-components/badge
0.38.0 (2023-09-05) #
Note: Version bump only for package @spectrum-web-components/badge
0.37.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/badge
0.36.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/badge
0.35.0 (2023-07-31) #
Note: Version bump only for package @spectrum-web-components/badge
0.34.0 (2023-07-11) #
Note: Version bump only for package @spectrum-web-components/badge
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/badge
0.33.0 (2023-06-08) #
Note: Version bump only for package @spectrum-web-components/badge
0.32.0 (2023-06-01) #
Note: Version bump only for package @spectrum-web-components/badge
0.31.0 (2023-05-17) #
Note: Version bump only for package @spectrum-web-components/badge
0.30.0 (2023-05-03) #
Bug Fixes #
- remove outdated CEM listing (
2e110d9 )
Features #
- add badge component (
cabfdfe ) - badge: use core tokens (
83e566c ) - delivery dev mode messages in various packages (
62370a1 ) - include all Dev Mode files in side effects (
f70817c ) - shared pkg versions, devmode define warning, registry-conflicts docs (
6e49565 )
0.4.9 (2023-04-24) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.8 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.7 (2023-03-22) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.6 (2023-03-08) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.5 (2023-02-08) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.4 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.3 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.2 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.1 (2022-11-21) #
Note: Version bump only for package @spectrum-web-components/badge
0.4.0 (2022-11-14) #
Features #
- badge: use core tokens (
83e566c )
0.3.1 (2022-10-17) #
Note: Version bump only for package @spectrum-web-components/badge
0.3.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.2.0 (2022-08-04) #
Features #
- delivery dev mode messages in various packages (
62370a1 )
0.1.3 (2022-07-18) #
Note: Version bump only for package @spectrum-web-components/badge
0.1.2 (2022-06-29) #
Note: Version bump only for package @spectrum-web-components/badge
0.1.1 (2022-06-07) #
Note: Version bump only for package @spectrum-web-components/badge
0.1.0 (2022-05-27) #
Bug Fixes #
- remove outdated CEM listing (
2e110d9 )
Features #
- add badge component (
cabfdfe )
Description #
<sp-badge>
elements display a small amount of color-categorized metadata. They're ideal for getting a user's attention.
Usage #
yarn add @spectrum-web-components/badge
Import the side effectful registration of <sp-badge>
via:
import '@spectrum-web-components/badge/sp-badge.js';
When looking to leverage the Badge
base class as a type and/or for extension purposes, do so via:
import { Badge } from '@spectrum-web-components/badge';
Sizes #
<div style="display: flex; gap: var(--spectrum-spacing-75);"> <sp-badge size="s">Label</sp-badge> <sp-badge size="s"> <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle> Icon and label </sp-badge> </div>
<div style="display: flex; gap: var(--spectrum-spacing-75);"> <sp-badge size="m">Label</sp-badge> <sp-badge size="m"> <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle> Icon and label </sp-badge> </div>
<div style="display: flex; gap: var(--spectrum-spacing-75);"> <sp-badge size="l">Label</sp-badge> <sp-badge size="l"> <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle> Icon and label </sp-badge> </div>
<div style="display: flex; gap: var(--spectrum-spacing-75);"> <sp-badge size="xl">Label</sp-badge> <sp-badge size="xl"> <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle> Icon and label </sp-badge> </div>
Variants #
The <sp-badge>
can be customized with either semantic or non-semantic variants.
Semantic #
<div style="display: flex; gap: var(--spectrum-spacing-75);"> <sp-badge variant="accent">Informative</sp-badge> <sp-badge variant="neutral">Neutral</sp-badge> <sp-badge variant="informative">Informative</sp-badge> <sp-badge variant="positive">Positive</sp-badge> <sp-badge variant="negative">Negative</sp-badge> <sp-badge variant="notice">Notice</sp-badge> </div>
Non-Semantic #
Non-semantic badge colors are no longer supported directly by Spectrum and Spectrum Web Components. You can mimic their delivery via the following CSS Custom Properties. These values for the variant
attribute/property have not been marked as deprecated, but will no longer achieve the results you may have relied on in the past.
<div style="display: flex; gap: var(--spectrum-spacing-75); flex-wrap:wrap;"> <sp-badge variant="seafoam">Seafoam</sp-badge> <sp-badge variant="indigo">Indigo</sp-badge> <sp-badge variant="purple">Purple</sp-badge> <sp-badge variant="fuchsia">Fuchsia</sp-badge> <sp-badge variant="magenta">Magenta</sp-badge> <sp-badge variant="yellow">Yellow</sp-badge> <sp-badge variant="gray">Gray</sp-badge> <sp-badge variant="red">Red</sp-badge> <sp-badge variant="orange">Orange</sp-badge> <sp-badge variant="chartreuse">Chartreuse</sp-badge> <sp-badge variant="celery">Celery</sp-badge> <sp-badge variant="green">Green</sp-badge> <sp-badge variant="cyan">Cyan</sp-badge> <sp-badge variant="blue">Blue</sp-badge> </div>
Fixed #
When you'd like to have the <sp-badge>
display as if "fixed" to the edge of a UI, the fixed
attribute/property can be leveraged to alter the border rounding based on the position you would like to achieve:
<div style="position: relative; width: 400px; height: 200px; background: #eee; max-width: 100%" > <sp-badge>None</sp-badge> <sp-badge fixed="block-start" style="position: absolute; top: 0; left: 200px;" > block-start </sp-badge> <sp-badge fixed="inline-end" style="position: absolute; right: 0; top: 100px;" > inline-end </sp-badge> <sp-badge fixed="block-end" style="position: absolute; bottom: 0; left: 200px;" > block-end </sp-badge> <sp-badge fixed="inline-start" style="position: absolute; left: 0; top: 100px;" > inline-start </sp-badge> </div>