Components

Badge

Color label chip for categorization and status indication

Overview

Badge is a color label chip. It supports three modes: read-only, removable, and add button.

6 colors — blue, gray, green, purple, red, yellow
3 modes — Default (read-only), removable (onRemove), add button (addButtonVariant)
Chevron icon — Displays chevron in default mode when connected to a selector

Basic Usage

Website

Brand

Research

Hiring

Bugs

Other

Colors

Color	Example Usage
`blue`	In progress, informational
`gray`	Default, inactive
`green`	Completed, success
`purple`	Special, premium
`red`	Urgent, error
`yellow`	Warning, pending

Props

Prop	Type	Default	Required	Description
`addButtonVariant`	`'default' \| 'error'`	-	No	Renders the add button. error shows the required-but-empty state
`item`	`BadgeItem \| OmittedBadgeItem`	-	Yes	The item to show: name and color
`isOpenedSelector`	`boolean`	-	No	Rotates the chevron while the attached selector is open
`withoutIcon`	`boolean`	-	No	Hides the chevron
`openSelector`	`(e: MouseEvent<HTMLButtonElement>) => void`	-	No	Called when the add button is pressed
`onRemove`	`() => void`	-	No	Shows a remove button and is called when it is pressed

BadgeItem Type

export type BadgeColor = 'blue' | 'gray' | 'green' | 'purple' | 'red' | 'yellow'

export type BadgeItem = {
  id: string
  name: string
  color?: BadgeColor
  createdAt?: Date | string
  updatedAt?: Date | string | null
  deletedAt?: Date | string | null
}

Specification

base

상태	요소	속성	값
enabled	root	`borderRadius`	`$size.radius.100`
enabled	root	`typography`	`$text.singleLine.caption`
enabled	root	`padding`	`$size.space.200`
enabled	root	`backgroundColor`	`var(--background-tag-<color>)`토큰 아님 — set by item.color (blue, gray, green, purple, red, yellow)
enabled	root	`color`	`var(--text-tag-<color>)`토큰 아님 — set by item.color
enabled	addButton	`borderWidth`	`$size.stroke.border`
enabled	addButton	`borderStyle`	`dashed`토큰 아님 — no line style token
enabled	addButton	`borderColor`	`$color.border.default.secondary`
enabled	addButton	`padding`	`7px`토큰 아님 — space.200 minus the border so the button is as tall as a badge
focusVisible	addButton	`outlineWidth`	`$size.stroke.focus`
focusVisible	addButton	`outlineStyle`	`solid`토큰 아님 — no line style token
focusVisible	addButton	`outlineColor`	`$color.border.focus.default`
focusVisible	addButton	`outlineOffset`	`2px`토큰 아님 — no ring offset token

addButtonVariant=default

상태	요소	속성	값
enabled	addButton	`backgroundColor`	`$color.background.default.default`
enabled	addButton	`color`	`$color.text.default.secondary`
hover	addButton	`backgroundColor`	`$color.background.default.defaultHover`
hover	addButton	`color`	`$color.text.default.default`
hover	addButton	`borderColor`	`$color.border.default.tertiary`

addButtonVariant=error

상태	요소	속성	값
enabled	addButton	`backgroundColor`	`$color.background.danger.secondary`
enabled	addButton	`color`	`$color.text.danger.default`
enabled	addButton	`borderColor`	`$color.border.danger.default`

Guidelines

Use Badge for single selection; use Tag for multi-selection
Combine with BadgeSelector for a selection UI with built-in CRUD functionality