Badge

Deployments

web · main2 min ago

Ready

api · fix/authBuilding for 48s

Building

docs · nextQueued

Queued

app · releaseFailed after 3m

Error

worker · v1Last week

Archived

edge · betaPreview

Preview

Installation

npx axiom add badge

pnpm dlx axiom add badge

yarn dlx axiom add badge

bun x axiom add badge

Installs: react-native-reanimated, for Badge.Anchor.

Colors come from badge.<variant>.default.{background,foreground,border} in the component tokens. Counters and dots use badge.count, whose border is the ring.

Usage

import { Badge } from '@/components/ui/badge';

<Badge variant="success" dot>Ready</Badge>
<Badge count={3} />

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The label. One or two words.
`variant`	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'outline' \| 'inverse'`	`'neutral'`	Color from the theme’s feedback colors: subtle background with a saturated label. `outline` and `inverse` are neutral alternatives.
`dot`	`boolean`	`false`	Small dot before the label in the label color, to reinforce a status.
`icon`	`IconName`	—	Icon of your registry before the label. Replaces `dot`.
`count`	`number`	—	Renders a round counter instead of a label, in `feedback.error`. `0` hides the badge.
`max`	`number`	`99`	Above this, the counter shows `99+`.
`size`	`'sm' \| 'md'`	`'md'`	Minimum height: 18 or 22pt.
`accessibilityLabel`	`string`	—	For counters, what is counted: `"3 unread notifications"`.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the pill.

Badge.Anchor

Positions a count or dot badge on the corner of another element.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The element to decorate: an IconButton, an Avatar.
`badge`	`ReactElement<BadgeProps>`	—	The badge to place. Use `count` or `dot`.
`placement`	`'top-right' \| 'bottom-right'`	`'top-right'`	Corner. The badge gets a ring in the background color so it detaches from the element.
`invisible`	`boolean`	`false`	Hides the badge with an animation, without unmounting.

Badges don’t handle presses. If the user can tap it to filter or remove it, use a Chip.

Use cases

Unread counter on an icon

Badge.Anchor with count on a navigation icon. The accessibility label says what the number means.

Home

<Badge.Anchor
	badge={
		<Badge count={unread} accessibilityLabel={`${unread} unread messages`} />
	}
>
	<IconButton icon="inbox" accessibilityLabel="Inbox" onPress={openInbox} />
</Badge.Anchor>

Order status

The variant carries meaning: success for delivered, warning for delayed. Keep the text, color alone isn’t enough.

Orders

#104823 items · $88.90

Delayed

#104311 item · $32.00

Delivered

#103882 items · $19.50

Refunded

const statusBadge = {
	delayed: (
		<Badge variant="warning" icon="clock">
			Delayed
		</Badge>
	),
	delivered: (
		<Badge variant="success" icon="check">
			Delivered
		</Badge>
	),
	refunded: <Badge variant="error">Refunded</Badge>,
};

Label on a card

A neutral or inverse badge on top of media to tag the content: “New”, “Live”, “Pro”.

LIVE

Launch keynote

Pro

12.4k watching

<Badge variant="error" dot>LIVE</Badge>
<Badge variant="inverse">Pro</Badge>

Chip
BottomTabBar, which shows badges on tabs

Badge

On this page