Badge

Small pill-shaped label used to show status, counts, or categories. All props are optional — render with an icon, text, both, or neither.

Basic Usage

import { Badge } from '@multinaire/ui';

<Badge />
<Badge title="New" />
<Badge icon="Star1" />
<Badge type="success" icon="TickCircle" title="Verified" />

Props

All props are optional.

Prop	Type	Default	Description
type	BadgeType	'primary'	Color variant of the badge
icon	IconName	—	Icon name from the Iconsax library or the built-in custom icon set
title	string	—	Label text displayed inside the badge
testID	string	title	Test identifier for UI automation. Defaults to the title value
onPress	() => void	—	Press handler. Renders the badge as a touchable when provided

BadgeType

Value	Background	Foreground
'primary'	primary	onPrimary
'secondary'	secondary	onSecondary
'surface'	backgroundVariant	onBackground
'success'	success	onPrimary
'warning'	warning	onPrimary
'error'	error	onPrimary

Examples

All Variants

<Badge type="primary" title="Primary" />
<Badge type="secondary" title="Secondary" />
<Badge type="surface" title="Surface" />
<Badge type="success" title="Active" />
<Badge type="warning" title="Pending" />
<Badge type="error" title="Failed" />

With Icon

<Badge type="success" icon="TickCircle" title="Verified" />
<Badge type="error" icon="CloseCircle" title="Rejected" />
<Badge type="warning" icon="InfoCircle" title="Review" />

Text Only

<Badge title="New" />
<Badge type="error" title="99+" />

Icon Only

<Badge icon="Star1" />
<Badge type="error" icon="CloseCircle" />

Count Badge

<Badge type="error" title="99+" />

Pressable Badge

<Badge
  type="primary"
  title="Filter"
  onPress={() => openFilterSheet()}
/>