@spectrum-web-components/badge

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

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>