Badge()

Badge(__namedParameters): Element

Badge - A small status indicator component for labeling and notifications

Displays contextual information like status, counts, or labels. Supports various visual variants and can be positioned relative to other elements. Useful for indicating notifications, statuses, or providing supplementary information.

Parameters

__namedParameters

BadgeProps

Returns

Element

Examples

// Basic badge
<Badge>New</Badge>

// Status badges with different variants
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="serious">Error</Badge>

// Positioned badge (typically used with other components)
<div className="relative">
  <Button>Messages</Button>
  <Badge placement='top right' offset={-spacingS}>3</Badge>
</div>