Badge
A short label for status or category.
npx shadcn add @klarhimmel/badgeWhen to use
Use for
One or two words of status or category.
Not for
Actions. A badge is never a button.
Pairs with
Cards, table rows, headers.
Preview
NeutralAccentOutline
badge.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Badge } from '@/components/klarhimmel/ui/badge';
export default function Example() {
return (
<Theme theme="brand">
<Badge tone="accent">New</Badge>
</Theme>
);
}Install
Import
import { Badge } from '@/components/klarhimmel/ui/badge';- Lands in
- components/klarhimmel/ui/badge.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
- Render in
- Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
tone | 'neutral' | 'accent' | 'outline' | 'neutral' | Visual weight. |
children | ReactNode | - | Required. The label. |
className | string | - | Extra classes, merged after the component's own. |
Accessibility
| Key | Does |
|---|---|
Tab | Skips it: a badge is text, not a control |
Do not rely on the colour alone. The word carries the meaning.
Accessibility