Skip to content

Badge

A short status or category label.

Single originNewDecaf

import { Badge } from '@brand-studio/ui';

export default function BadgeDemo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      <Badge>Single origin</Badge>
      <Badge tone="accent">New</Badge>
      <Badge tone="outline">Decaf</Badge>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Badge } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Badge } from '@brand-studio/ui';

<Badge tone="accent">New</Badge>

Accessibility

Badges are plain text. Do not use colour alone to carry meaning.

API Reference

Prop	Type	Default
`tone?`	`"accent" \| "neutral" \| "outline"`	`'neutral'`

Also accepts every HTMLAttributes<HTMLSpanElement> attribute.