Feedback·@exepert/ui / Badge

Badge

A small status label for metadata, state, or classification.

Open in Playground ↗All components

Variants and states

5 copy-ready examples

Neutral badge

Neutral badges carry classification.

Open in Playground ↗

Starting preview…

import { Badge } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <Badge variant="neutral">Preview</Badge>
  );
}

Usage

Use a short noun or status phrase and pair it with text when needed.

Props

variant: neutral | accent | success | warning | danger
children: ReactNode

Accessibility

Do not communicate status with color alone.
Keep labels short enough to scan in a dense list.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.1

import { Badge } from "@exepert/ui";

import "@exepert/ui/styles.css";