v0.0.4

Badge

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Edit this page

Installation

Install yarn add @spark-web/badge

npm @spark-web/badge

Source GitHub.com

Bundle unpkg.com

A badge is a decorative indicator used to either call attention to an item or for communicating non-actionable, supplemental information.

Example

Label

Open in Playroom

<Badge tone="info">Label</Badge>

<Badge tone="info">Label</Badge>

Tones

accent

caution

critical

info

neutral

Open in Playroom

const tones = ['accent', 'caution', 'critical', 'info', 'neutral'];

return (
  <Inline gap="small">
    {tones.map(tone => (
      <Badge key={tone} tone={tone}>
        {tone}
      </Badge>
    ))}
  </Inline>
);

const tones = ['accent', 'caution', 'critical', 'info', 'neutral'];

return (
  <Inline gap="small">
    {tones.map(tone => (
      <Badge key={tone} tone={tone}>
        {tone}
      </Badge>
    ))}
  </Inline>
);

Props

Badge

Prop	Type	Description
children	string \| number	The label of the badge.
data?	DataAttributeMap	Sets data attributes on the component.
tone?	BadgeTones: "accent" \| "caution" \| "critical" \| "info" \| "neutral" \| "positive"	The tone of the badge. Default: `"neutral"`

IndicatorDot

Prop	Type	Description
tone	BadgeTones: "accent" \| "caution" \| "critical" \| "info" \| "neutral" \| "positive"	The tone of the indicator dot.
data?	DataAttributeMap	Sets data attributes on the component.
label?	string	When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users.