BetaData display

Badge

A count, or the fact that there is one.

Overview

A count, or the fact that there is one.

First example

<Badge>3</Badge>
<Badge variant="success-soft" size="sm">Payé</Badge>
<Badge isDot variant="warning" />

Anatomy

<Badge />

One node and no slots, per the plan. A badge is a mark: whatever is inside it is one line of two or three characters, and a slot would be a name for a Text this component can just as well insert itself (R3).

Usage

<Badge>3</Badge>
<Badge variant="success-soft" size="sm">Payé</Badge>
<Badge isDot variant="warning" />

Hanging off what it counts:

<View>
  <Icon as={BellIcon} size={24} />
  <Badge placement="top-end" accessibilityLabel="12 notifications non lues">
    12
  </Badge>
</View>

At the end of a list row, in flow, where no placement is wanted:

<Row justifyContent="space-between" alignItems="center">
  <Typography>Boîte de réception</Typography>
  <Badge variant="default">128</Badge>
</Row>

Root props

BadgeProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	—
variant	`BadgeVariant \| undefined`	No	—
size	`Size \| undefined`	No	Height, horizontal padding and type. The width follows the count inside it.
radius	`RadiusKey \| undefined`	No	Overrides the capsule. A badge is a pill at every size — that is what makes a two-digit count read as one object — so this is the prop for the square marker.
color	`string \| undefined`	No	A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant: the fill of a `primary`, the border and label of a `tertiary`, the label of a `ghost`.
isDot	`boolean \| undefined`	No	The bare circle — no label, no padding, a fixed diameter. It is what a badge is when the fact that there is something is the whole message: a dot on a tab, an unsaved marker on a row. Children are not rendered while it is set: a dot is the absence of a label, so there is nothing for one to sit in.
placement	`BadgePlacement \| undefined`	No	—
asChild	`boolean \| undefined`	No	R12 — the child element becomes the badge and keeps this variant's style.
style	`StyleProp<ViewStyle>`	No	—

Slots

This component is standalone and exposes no public slot.

Variants, sizes and colour

This component adds no visual axis of its own. The values it does take are in the generated types above and in the live demo.

Accessibility

No default accessibilityRole: a badge is a label, and what a screen reader reads is the text inside it. What it cannot read is the subject — "3" beside a bell means three notifications only to someone who can see the bell — so a placed badge is one of the few places in this library where an accessibilityLabel is not optional.

Migration from legacy

Legacy	v1
`<Badge count={3} />`	`<Badge>3</Badge>`
`<Badge dot />`	`<Badge isDot />`
`<Badge themeColor="success" />`	`<Badge variant="success" />`
`<Badge position="topRight" />`	`<Badge placement="top-end" />` (RTL-safe)
`<Badge>{children}</Badge>` wrapping	the parent wraps; the badge is placed on it