Badge
A small status or category label in 12 colors and 6 styles.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { Badge, BadgeCell, BadgeColor, BadgeStyle } from "@wunderui/react"Examples
Indigo
Ghost, solid, tinted and outlined — each with an icon and an × that removes it.
Dark
The solid dark chip for filters and tags on light surfaces.
Green
The same four styles in green, for success and “active” states.
All badges and chips
Every badge of the Figma core component — pill and square, primary, secondary, outline and ghost in all ten colors — and the 22 chips. Badges and chips come in one size: 20 px high.
| Form=pill | Dark · Light · Indigo · Blue · Purple · Pink · Red · Orange · Yellow · Green |
|---|---|
| Primary | |
| Secondary | |
| Outline | |
| Ghost |
| Form=square | Dark · Light · Indigo · Blue · Purple · Pink · Red · Orange · Yellow · Green |
|---|---|
| Primary | |
| Secondary | |
| Outline | |
| Ghost |
| Chip | 22 color pairs |
|---|---|
| All |
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Chat history sidebar
A searchable conversation list: type to filter, pick a chat to open it. New conversations carry a badge, the ⌘K hint disappears once you type.
Message feedback popover
Quick reasons as chips — pick as many as apply before sending.
What went wrong?
Chat history sidebar (pinned)
The same list with the pinned conversations grouped on top.
Pinned
Empty board state
An empty board that suggests where to start — pick a card type, then create the first card.
No cards yet
Create the first card or import from a template.