Badge

DefaultNeutralOutlineSuccessWarningDanger

계약

Overview

Machine-readable contract from Component Spec.

component: badgeexport: Badgeversion: 1recipe: badgetokens.visual: badgeattributes: data-refineui=badge

Anatomy

Part	data-refineui
root	badge

Variants

Axis	Values
variant	default, neutral, outline, success, warning, danger
layout	label, number

States

Scope	Category	Values
component	environment	forced-colors, dir, prefers-contrast

Layout

Property	Value
direction	logical
rtl	true

토큰

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Variant

Select...󰯑

defaultSuccess12

Recipe → Tokens

Slot bindings for variant="default" — declared in badge.recipe.ts.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
root	default	background	badge.default.background	backgroundBrand	primaryBlack	primaryGray	bg-refineui-alias-background-brand
root	default	foreground	badge.default.foreground	foregroundOnBrand	neutralWhite	neutralBlack	text-refineui-alias-foreground-inversed

Component token trace

All paths in token-trace-v2.json prefixed with badge.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
badge.danger.background	backgroundError	red500	red500	#FF6969	#FF6969
badge.danger.foreground	foregroundOnError	neutralWhite	neutralBlack	#FFFFFF	#000000
badge.default.background	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
badge.default.foreground	foregroundOnBrand	neutralWhite	neutralBlack	#FFFFFF	#000000
badge.neutral.background	backgroundBrandSubtle	primaryLightGray	neutral800	#E6E6E6	#2A2A2A
badge.neutral.foreground	foregroundBrandStrong	neutralBlack	primaryLightGray	#000000	#E6E6E6
badge.outline.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
badge.outline.foreground	foregroundBrandStrong	neutralBlack	primaryLightGray	#000000	#E6E6E6
badge.success.background	backgroundSuccess	green500	green500	#26B12D	#26B12D
badge.success.foreground	foregroundOnSuccess	neutralWhite	neutralBlack	#FFFFFF	#000000

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Badge } from "@refineui/react";

<Badge>New</Badge>

<Badge variant="success">5</Badge>

<Badge variant="warning" layout="number">12</Badge>

<Badge variant="danger">Error</Badge>

<Badge variant="outline">Draft</Badge>

API 레퍼런스

Prop	Default	Type	Description
variant	"default"	"default" | "neutral" | "outline" | "success" | "warning" | "danger"	시각적 변형 스타일.
layout	"label"	"label" | "number"	레이블 vs 숫자 표시용 레이아웃 타입.