Component reference
Badge
A compact label for status, classification or a small count.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { Badge } from "@pimolu/react";
export function BadgeExample() {
return (
<div className="space-y-6">
<div className="flex flex-wrap gap-3">
<Badge variant="success">Deployment ready</Badge>
<Badge
variant="neutral"
appearance="outline"
>
Version 1.0
</Badge>
</div>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
sm, md and lg.
Variants
The semantic tone of the label.
Appearances
Solid, soft, outline and glass.
Usage
Use semantic tone and appearance to reinforce a text label. The example enumerates tones from badgeVariantMap.
A Badge is a span and does not provide a dismiss action or button behavior. Use a real control for interaction.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluBadgeProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "neutral" | Variant exposed by this component. |
appearance | "solid" | "soft" | "outline" | "glass" | undefined | "soft" | Visual treatment of the control or surface. |
size | "sm" | "md" | "lg" | undefined | "md" | Component size. |
radius | "sm" | "md" | "lg" | "none" | "full" | undefined | "md" | Corner-radius treatment. |
dot | boolean | undefined | false | Decorative status dot |
startIcon | ReactNode | — | Decorative leading icon |
endIcon | ReactNode | — | Decorative trailing icon |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLSpanElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLSpanElement> | undefined | — | Standard React/HTML attribute. |
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "neutral"
Variant exposed by this component.
appearance"solid" | "soft" | "outline" | "glass" | undefinedDefault: "soft"
Visual treatment of the control or surface.
size"sm" | "md" | "lg" | undefinedDefault: "md"
Component size.
radius"sm" | "md" | "lg" | "none" | "full" | undefinedDefault: "md"
Corner-radius treatment.
dotboolean | undefinedDefault: false
Decorative status dot
startIconReactNodeNo default extracted.
Decorative leading icon
endIconReactNodeNo default extracted.
Decorative trailing icon
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLSpanElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLSpanElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Write the meaning in text instead of using color alone.
- If a status changes dynamically, announce the surrounding update appropriately; a static Badge is not a live region.