MultinaireBadge

Small pill-shaped label used to show status, counts, or categories. Supports icons, text, and six color variants.

Basic Usage

import { MultinaireBadge } from '@multinaire/multinaire-design';

<MultinaireBadge title="New" />
<MultinaireBadge type="error" title="3" />
<MultinaireBadge type="success" icon="TickCircle" title="Verified" />

Props

Prop	Type	Default	Description
type	BadgeType	'primary'	Color variant of the badge. Defaults to 'primary'
icon	IconName	—	Icon name from the Iconsax library or the built-in custom icon set
title	string	—	Label text displayed inside the badge
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

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

With Icon

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

Icon Only

<MultinaireBadge type="primary" icon="Star1" />

Count Badge

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

Pressable Badge

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