Active badge
import { Badge } from "@combric/react";
export function Example() {
return <Badge variant="accent">Active</Badge>;
}Badge
Non-interactive compact label with neutral or accent presentation.
@combric/react · v1.1.1 · Current
Import and usage
import { Badge } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Examples
Neutral and accent variants
NeutralAccent
import { Badge } from "@combric/react";
export function Example() {
return <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}><Badge variant="neutral">Neutral</Badge><Badge variant="accent">Accent</Badge></div>;
}Public API
| Name |
|---|
Badge |
| Property / capability | Published contract |
|---|---|
| variant | neutral | accent |
| Contract | native span props |
Accessibility
Renders a non-interactive span; status announcements remain consumer-owned.
CSS and customization
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.