Data display

Ribbon and Indicator

A label around a card's corner, and a dot or number on the corner of an avatar or icon.

Ant Design: Badge.Ribbon, Badge with children

import { Ribbon, Indicator } from '@alea/ui';

Examples

Corner labels on cards, and status dots or counts on avatars and icons.

Lab Pro

All 13 plugins

Popular

Yearly

Two months free

-20%

A label wrapped around the corner of a card (Ant Badge.Ribbon).

Prop	Type	Default	Description
`text`required	`ReactNode`	-	The ribbon's text: New, Popular, -20%.
`className`	`string`	-	Extra class names for the root element.
`placement`	`"start" \| "end"`	`'end'`	start or end (default) corner.
`tone`	`"danger" \| "success" \| "warning" \| "accent" \| "neutral"`	`'accent'`	Color meaning: accent, success, warning, danger or neutral.

A dot or number on the corner of an avatar, icon or button: status, unread count (Mantine Indicator, Ant Badge with children).

Prop	Type	Default	Description
`label`required	`string`	-	What it means, for screen readers ("3 unread messages", "Online").
`className`	`string`	-	Extra class names for the root element.
`count`	`number`	-	A number, or nothing for a dot.
`isHidden`	`boolean`	-	Hide it (keeps the child).
`max`	`number`	`99`	Shows max+ above this. Default 99.
`position`	`"bottom-end" \| "top-end" \| "top-start" \| "bottom-start"`	`'top-end'`	Which corner. Default top end.
`processing`	`boolean`	-	Pulse to draw attention. Respects reduced motion.
`tone`	`"danger" \| "success" \| "warning" \| "accent" \| "neutral"`	`'danger'`	Color meaning: accent, success, warning, danger or neutral.

The indicator has a text label for screen readers ("3 unread", "Online"); the number itself is hidden from them.

Don't