sp-badge

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
size size ElementSize
variant variant BadgeVariant 'informative'

Slots #

Name Description
default slot Text label of the badge
icon Optional icon that appears to the left of the label

Description #

<sp-badge> elements display a small amount of color-categorized metadata. They're ideal for getting a user's attention.

Usage #

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

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 #

Small
<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
<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>
Medium
<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
<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>
Large
<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
<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>
Extra Large
<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
<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-global-dimension-size-50);">
<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>
</div>

Non-Semantic #

<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
<sp-badge variant="fuchsia">Fuchsia</sp-badge>
<sp-badge variant="indigo">Indigo</sp-badge>
<sp-badge variant="magenta">Magenta</sp-badge>
<sp-badge variant="purple">Purple</sp-badge>
<sp-badge variant="seafoam">Seafoam</sp-badge>
<sp-badge variant="yellow">Yellow</sp-badge>
</div>