Badge

A small status/count label. Can be self-dismissing via a built-in × button, or dismissed programmatically through a ref handle.

Usage


import { Badge } from '@mav-labs-inc/mavkit-react'
 
<Badge variant="success">Active</Badge>
<Badge variant="danger" size="sm" dismissible onDismissed={onDismiss}>Error</Badge>

Examples

Variants

PrimarySecondarySuccessWarningDangerInfo

Sizes

SmallMediumLarge

Dismissible

ErrorDismiss me

Props

Badge accepts every native <span> attribute in addition to the props below.

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'primary'
size	'sm' \| 'md' \| 'lg'	'md'
dismissible	boolean	false	Renders a dismiss (×) button.
onDismissed	() => void	—	Fired once the dismiss animation completes. Remove the badge from your data model here.
ref	Ref<BadgeHandle>	—	{ dismiss(): void } — animate out and remove programmatically.