Badge

Shows a small indicator attached to another element, often used for notification counts, status dots, or labels

Usage

Use Badge to attach a small indicator to another element (for notification counts, status dots, or short labels). Wrap the element you want to annotate, then render another Badge inside to act as the indicator, as shown below.

import { Badge } from "@elemnts-ui/react";

<Badge>
  <Avatar />
  <Badge.Indicator>5</Badge.Indicator>
</Badge>;

Sizes

Control the indicator's size with the size prop.

Variants

Control the indicator's appearance with the variant prop.

Placements

Control the indicator's position with the placement prop.

Content

Badge can display text, numbers, or icons. If no children are passed, it renders as a dot-only indicator.

API Reference

BadgeRoot

The root component.

Prop	Type	Default
variant	`primary` \| `secondary`	`"primary"`
size	`xs` \| `sm` \| `md` \| `lg` \| `xl`	`"md"`
placement	`top-right` \| `top-left` \| `bottom-right` \| `bottom-left`	`"top-right"`

BadgeIndicator

Displays counters, labels, or icons.

Prop	Type	Default
as	`React.ElementType`	-
asChild	`boolean`	-