Badge

Badges are used to display small numeric values or status descriptors for UI elements.

Installation

npm i @melio-ui/badge

If @melio-ui/react is already installed globally, you can skip this step.

import { BadgeRoot, BadgeContent } from '@melio-ui/badge';

BadgeRoot: All parts of the badge are included.
BadgeContent: Elements that display a small numeric value or status description.

'use client';

import { Badge } from '@melio-ui/badge';

<Badge.Root>
  <Badge.Content />
</Badge.Root>;

'use client' must be used when rendering on the server side.

All parts of the badge are included.

Prop	Type	Default	Description
max	`number`	-	Up to the set maximum value is displayed, and values beyond that are shown with a +.
placement	`TypeAttributes.Placement "top" \| "top-left" \| "top-right" \| "bottom" \| "bottom-left" \| "bottom-right"`	"top-right"	Specifies the location of the value.

Elements that display a small numeric value or status description.

Prop	Type	Default	Description
children	`string \| number`	-	The value of the badge.

<BadgeRoot max={99}>
  <BadgeContent>{1000}</BadgeContent>
  <UserIcon width="2em" height="2em" />
</BadgeRoot>

<BadgeRoot placement="bottom-right">
  <BadgeContent>{10}</BadgeContent>
  <UserIcon width="2em" height="2em" />
</BadgeRoot>

<BadgeRoot>
  <BadgeContent>{10}</BadgeContent>
</BadgeRoot>