Badge components
Badges highlight status, counts, and categories. Replicated from the Figma Badge set (666 variants): 50-tone background, 200-tone border, and 700-tone text for all 12 utility colors, in pill, square, and modern types.
Badge example
Installation
Copy the React component from this repository, or import it from the Angular library.
# React - copy the component into your project
# components/ui/Badge.tsx from this repository, then:
import { Badge } from "./components/Badge";
# Angular - once adek-ui is installed:
import { AdekBadge } from 'adek-ui';Badge examples
Below are examples and variations of the badge component.
Pill colors
All 12 utility colors on the pill type (radius-full).
Badge color (square)
The same palette on radius-md corners - Figma's Type=Badge color.
Modern
Neutral white badge with border and shadow-xs - color-independent, pairs with a status dot.
Sizes
sm (2/8, text-xs), md (2/10, text-sm), lg (4/12, text-sm).
With dot
An 8px currentColor dot for status - works on every color and type.
With icons
12px leading or trailing icons with a 4px gap - arrows for trends, X for removable filters, plus for additive actions.
Icon only
Square icon-only badges for compact toolbars and tag pickers.
FAQs
How do I customize the color of a badge?
Use the color prop - all 12 utility scales from the Figma variables are built in. Avoid custom hex values; if a new color is needed it should be added to the token set first.
What types of badges are available?
Three: pill (radius-full), square (radius-md), and modern (white with border and shadow). All support dots, icons, and the three sizes.
Can I add icons to badges?
Yes - pass iconLeading or iconTrailing with a 12px icon, or use an icon alone with an aria-label for icon-only badges.
How do I make badges interactive?
Badges are presentational by design. For clickable filters, wrap the badge in a button element or use the Tag component, which has hover and close affordances built in.