badge
Small status pill with a semantic tone and solid/soft/outline variants.
A small headless badge/label. Polymorphic via as (defaults to span), with a
semantic tone crossed with a fill variant.
import { Badge } from '@fluixi-ui/badge';
<Badge tone="success">Paid</Badge>
<Badge tone="danger" variant="solid">Failed</Badge>
<Badge tone="warning" variant="outline">Pending</Badge>
<Badge as="a" tone="info" href="/x">Docs</Badge>
tone—neutral|primary|info|success|warning|danger(defaultneutral).variant—soft|solid|outline(defaultsoft).
Both are exposed as data-tone / data-variant on the [data-badge] element, so
each tone sets the strong colour, soft background and on-solid foreground once.
Overlay badge
BadgeAnchor pins a small badge to the corner of a wrapped element — the
Material-style notification badge. Pass a count via content (capped by max),
or dot for a bare indicator.
import { BadgeAnchor } from '@fluixi-ui/badge';
<BadgeAnchor content={8} tone="primary">
<IconButton aria-label="8 shared files"><FolderIcon /></IconButton>
</BadgeAnchor>
<BadgeAnchor content={128} max={99} tone="danger"><BellIcon /></BadgeAnchor>
<BadgeAnchor dot tone="success"><Avatar /></BadgeAnchor>
| Prop | Type | Description |
|---|---|---|
content |
number | string | JSX.Element |
Badge content, typically a count. |
dot |
boolean |
Show a bare dot instead of content. |
max |
number |
Cap a numeric content (e.g. 99 → 99+). Default 99. |
showZero |
boolean |
Show the badge when content is 0. |
invisible |
boolean |
Hide the badge while keeping the element in place. |
placement |
top-end | top-start | bottom-end | bottom-start |
Corner to anchor to. Default top-end. |
overlap |
rectangular | circular |
Shape of the wrapped element; circular nudges the badge inward to hug a round edge. Default rectangular. |
tone / variant |
— | Same as Badge (defaults primary / solid). |
// Alignment + circular anchors
<BadgeAnchor content={12} placement="bottom-end"><MailIcon /></BadgeAnchor>
<BadgeAnchor content={1} overlap="circular"><Avatar /></BadgeAnchor>
<BadgeAnchor dot overlap="circular"><Avatar /></BadgeAnchor>
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.