Data

Badge

Standalone pill label, or an anchored count/dot indicator positioned at the top-end corner of wrapped children.

Import

import { Badge } from "@zephora/react";

Examples

Variants and colors

PrimarySuccessWarningDangerInfoNeutral

<Badge>Primary</Badge>
<Badge variant="soft" color="success">Success</Badge>
<Badge variant="outline" color="warning">Warning</Badge>
<Badge variant="soft" color="danger">Danger</Badge>
<Badge variant="outline" color="info">Info</Badge>
<Badge variant="soft" color="neutral">Neutral</Badge>

Anchored count and dot

Providing `count` or `dot` together with children switches to anchored mode. Counts above `max` render as `max+`.

599+

<Badge count={5} color="danger">
  <Button variant="outline">Inbox</Button>
</Badge>
<Badge count={120} max={99} color="danger">
  <Button variant="outline">Notifications</Button>
</Badge>
<Badge dot color="success">
  <Button variant="outline">Live</Button>
</Badge>

API

Badge props

Prop	Type	Default	Description
`variant`	`"solid" \| "soft" \| "outline"`	`"solid"`	Visual style.
`color`	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "neutral"`	`"primary"`	Semantic color.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Pill size scale.
`count`	`number`	—	Anchored mode: numeric indicator positioned at the top-end corner of the wrapped children.
`max`	`number`	`99`	Cap for `count`; larger counts render as `{max}+`.
`dot`	`boolean`	`false`	Anchored mode: small dot indicator instead of a count.
`showZero`	`boolean`	`false`	Show the indicator when `count` is 0.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.