<View gap={4} direction="row" align="center"> <Badge color="critical" size="small">23</Badge> <Badge.Container> <Badge color="critical" size="small"> 23 </Badge> <View width={10} height={10} backgroundColor="neutral-faded" /> </Badge.Container> </View>
Badge renders its children as its text content. We recommend not rendering any complex content inside the Badge and only composing it with other components.
<Badge>Status</Badge>
Badges can be used to communicate an object's status or attribute, and, therefore, it comes in multiple colors.
<View gap={3} direction="row"> <Badge>Neutral</Badge> <Badge color="positive">Positive</Badge> <Badge color="critical">Critical</Badge> <Badge color="primary">Primary</Badge> </View>
Each color can be used with its default appearance or with faded and outline variants.
<View gap={3} direction="row"> <Badge color="positive" variant="faded"> Positive faded </Badge> <Badge color="positive" variant="outline"> Positive outline </Badge> </View>
Badges can display notification bubbles or other numerical values with the rounded property.
<Badge color="critical" rounded> 286 </Badge>
By default, Badge uses a medium size. Depending on the context and the size of the components it's used together with – you can pick a small or a large size. For instance, if it's used inside the Tabs button or as a notification bubble.
<View gap={3} direction="row"> <Badge size="small" color="critical" rounded> 24 </Badge> <Badge size="medium" color="primary"> Status </Badge> <Badge size="large">New version</Badge> </View>
If you don't have a value to show but instead want to use it as an empty notification badge - you can use it without the children property.
Note: When using an empty badge - you need to provide color property to keep it visible on the screen.
<View gap={3} direction="row"> <Badge size="small" color="primary" rounded /> <Badge color="critical" rounded /> <Badge size="large" color="neutral" rounded /> </View>
Badge can display icons on either side of it using icon and endIcon properties.
<View gap={3} direction="row"> <Badge icon={IconHeart}>Your favorite pick</Badge> <Badge endIcon={IconArrowRight}>Check our new release</Badge> </View>
If you want to use a badge for navigation or user interaction, you can pass onClick or href to it, same as in other interactive components.
<View gap={3} direction="row"> <Badge onClick={() => {}}>Status</Badge> </View>
When using Bagde for displaying a selection state, you can pass onDismiss together with dismissAriaLabel to render a dismiss icon.
<TextField startSlot={ <Badge size="large" onDismiss={() => {}} dismissAriaLabel="Remove ice-cream from selection" > Ice-cream </Badge> } placeholder="Placeholder" />
If you want to display a Badge in the corner of another element, you can use Badge.Container compound component. This will help you in situations when you implement notification bubbles, avatar statuses, and other similar cases.
<View direction="row" gap={6}> <Badge.Container> <Badge color="critical" size="small" rounded> 5 </Badge> <Avatar initials="A" squared color="neutral" /> </Badge.Container> <Badge.Container position="bottom-end"> <Badge color="critical" size="small" rounded> 23 </Badge> <Avatar initials="A" squared color="neutral" /> </Badge.Container> </View>
If your wrapped element has a circle shape, Badge won't be covering this element's visible area by default. However, you can achieve different positioning by using an overlap flag.
<Badge.Container overlap> <Badge size="small" color="primary" rounded> 5 </Badge> <Avatar initials="A" color="neutral" /> </Badge.Container>
When using Badge for real-time time data, like displaying unread messages count or displaying a user's status, it might become irrelevant over time. You can control the Badge visibility for such cases with the hidden property.
function Example() { const [hidden, setHidden] = React.useState(false); return ( <View gap={3} direction="row"> <Button onClick={() => setHidden((state) => !state)}>Toggle</Button> <Badge.Container> <Badge size="small" color="primary" rounded hidden={hidden}> 5 </Badge> <Avatar initials="A" squared color="neutral" /> </Badge.Container> </View> ); }