Badge

Small, inline status descriptors used to label, categorize, or indicate the state of UI elements. Supports semantic color variants, optional icons, and dismissible behavior.

Import

import { Badge } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Badge variant="success">Active</Badge>

With icon

<Badge variant="warning" showIcon>
  Pending
</Badge>

Dismissible

<Badge variant="info" dismissible onDismiss={() => console.log('dismissed')}>
  New
</Badge>

Custom icon

import { Icon } from '@wavebooking/aqua-fusion';

<Badge variant="primary" icon={<Icon name="StarIcon" size="xs" />} showIcon>
  Featured
</Badge>

Props

Prop	Type	Default	Description
`children`*	React.ReactNode	-	The badge label content.
`variant`	'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'purple' \| 'indigo' \| 'pink' \| 'orange' \| 'amber'	`'default'`	Semantic color variant of the badge.
`size`	'xs' \| 'sm' \| 'md' \| 'lg'	`'sm'`	Size of the badge.
`icon`	React.ReactNode	-	Custom icon element. When omitted, a default icon matching the variant is used.
`showIcon`	boolean	`false`	Whether to display the icon alongside the label.
`dismissible`	boolean	`false`	Whether the badge shows a dismiss button.
`onDismiss`	() => void	-	Callback fired when the dismiss button is clicked.
`animate`	boolean	`false`	Enable enter/exit animations via Framer Motion.
`className`	string	-	Additional CSS classes.