Badge
A small notification indicator that overlays other components. Two variants — Dot (plain circle) and Label (pill with text). Two appearances — Solid and Outline. Four sizes. Six colors. Five corner-rounding options.
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Badge } from "@tessinaui/ui";{/* Dot */}
<Badge variant="dot" color="error" />
{/* Label with count */}
<Badge variant="label" size="sm" value="+99" />
{/* Label with text — grows horizontally to fit */}
<Badge variant="label" size="md" color="success" value="Accepted" />
{/* Outline appearance */}
<Badge variant="label" size="md" color="primary" appearance="outline" value="Pro" />Showcase
All sizes, variants, appearances, and colors:
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "dot" | "label" | "dot" | dot — plain circle; label — pill that grows horizontally with text |
appearance | "solid" | "outline" | "solid" | solid — filled background; outline — transparent bg, colored border + text |
size | "xs" | "sm" | "md" | "lg" | "sm" | Diameter / height: 8 / 16 / 20 / 24 px |
color | "error" | "warning" | "success" | "info" | "primary" | "secondary" | "error" | Color token used for background (solid) or border + text (outline) |
rounded | "full" | "lg" | "md" | "sm" | "none" | "full" | Corner rounding for label badges — dots are always rounded-full |
value | string | — | Text content for the label variant. Badge grows horizontally to fit. |
className | string | — | Extra classes on the <span> |
All other native <span> attributes are forwarded.
Sizes
| Size | Diameter | Label text | Use case |
|---|---|---|---|
xs | 8 px | — (dot only) | Minimal presence indicator |
sm | 16 px | 10 px | Icon button overlays, nav items |
md | 20 px | 12 px | Standard notification counts |
lg | 24 px | 12 px | Larger UI elements |
xsis dot-only. Passingvariant="label"atxsrenders a dot without text.
Appearances
{/* Solid — filled background with on-color text */}
<Badge variant="label" size="md" color="error" appearance="solid" value="+99" />
{/* Outline — transparent background, colored border and text */}
<Badge variant="label" size="md" color="primary" appearance="outline" value="Pro" />Colors
| Color | Solid bg | Outline border/text | Use case |
|---|---|---|---|
error | bg-error | ring-error text-error | Unread counts, notifications (default) |
warning | bg-warning | ring-warning text-warning | Attention needed |
success | bg-success | ring-success text-success | Positive / completed |
info | bg-info | ring-info text-info | Informational |
primary | bg-primary | ring-primary text-primary | Highlighted / featured |
secondary | bg-secondary | ring-border text-foreground | Neutral / low emphasis |
Accessibility
- Renders as
<span>— wrap in a parent witharia-labeldescribing the notification context - For screen readers, add
<span className="sr-only">3 unread notifications</span>alongside the badge
Spinner
Animated loading indicators with ring, dots, and pulse variants, five sizes, intent colors including brand primary, optional track, label positions, and LTR/RTL support.
Avatar
A circular (or rounded) user avatar that displays a profile image, 1–2 character initials, or a fallback icon. Supports six sizes, six initials color variants, an optional Status dot at any corner, full RTL layout, and an AvatarGroup for stacking.