The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Badge

A small label to display tags and counts
<Badge>Hello</Badge>

Props
Link to this heading

<Badge>

import { Badge } from '@strum/react';
name
type
default
borderRadius
ConditionalStyle<Values<{ none: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; circle: CSSVarFunction; extraLarge: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
medium
color
"accent" | "neutral" | "error" | "success" | "warning"
accent

Colors
Link to this heading

<Stack direction="horizontal">

  <Badge color="accent">Accent</Badge>

  <Badge color="neutral">Neutral</Badge>

  <Badge color="error">Error</Badge>

  <Badge color="warning">Warning</Badge>

  <Badge color="success">Success</Badge>

</Stack>

Border radius
Link to this heading

<Stack direction="horizontal">

  <Badge>Default</Badge>

  <Badge borderRadius="pill">Pill</Badge>

</Stack>

With headings
Link to this heading

<Stack alignItems="flex-start">

  <Heading level="1">

    Heading 1 <Badge>Hello</Badge>

  </Heading>

  <Heading level="2">

    Heading 2 <Badge>Hello</Badge>

  </Heading>

  <Heading level="3">

    Heading 3 <Badge>Hello</Badge>

  </Heading>

</Stack>

With buttons
Link to this heading

Use badges within buttons for small status our counter text.

<Stack alignItems="flex-start">

  <Button>

    Notifications <Badge color="neutral">3</Badge>

  </Button>

  <Button>

    Submit <Badge color="warning">Careful!</Badge>

  </Button>

</Stack>
Edit on GitHub