Badge

A small circular indicator for a count or a tiny icon.

When to use

Use Badge for a numeric count or a compact icon indicator (notification counts, statuses on an icon/avatar). It renders a <div> with its content wrapped in a <span> and does nothing interactive.

There is no @uxf/form twin. For a text status label use Lozenge; for an interactive or removable tag use Chip.

Usage

import { Badge } from "@uxf/ui/badge";

// count
<Badge size="small">12</Badge>

// icon
import { Icon } from "@uxf/ui/icon";
<Badge>
    <Icon name="check" size={16} />
</Badge>

Props

Extends HTMLAttributes<HTMLDivElement>, so standard <div> attributes (className, children, onClick, …) are accepted.

Variants & states

Built-in values (from theme.ts):

BadgeSizes is an open interface, so a project can add its own values via module augmentation:

// badge.d.ts
declare module "@uxf/ui/badge/theme" {
    interface BadgeSizes {
        xl: true;
    }
}

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/badge.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.