CoreStatusBadge

레거시 상태 뱃지 컴포넌트. StatusBadge로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 StatusBadge를 사용하세요.

CoreStatusBadge는 상태·카테고리를 시각적으로 나타내는 뱃지 컴포넌트입니다.

6가지 status — default, informative, error, warning, success, primary
4가지 type — filled, tint, outline, subtle
4가지 size — sm, md, lg, xl
leadingElement / trailingElement — 도트, 로더, 또는 임의 아이콘 배치

Usage

Status × Type 조합

<VStack $css={{ gap: '8px' }}>
{['default','error','warning','success','primary','informative'].map((status) => (
  <HStack key={status} $css={{ gap: '8px', alignItems: 'center' }}>
    <CoreStatusBadge text={status} status={status} type="filled" />
    <CoreStatusBadge text={status} status={status} type="tint" />
    <CoreStatusBadge text={status} status={status} type="outline" />
    <CoreStatusBadge text={status} status={status} type="subtle" />
  </HStack>
))}
</VStack>

Leading Dot

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreStatusBadge text="Default"  status="default"  type="outline" leadingElement={{ dot: true }} />
<CoreStatusBadge text="Error"    status="error"    type="tint"    leadingElement={{ dot: true }} />
<CoreStatusBadge text="Success"  status="success"  type="tint"    leadingElement={{ dot: true }} />
<CoreStatusBadge text="Warning"  status="warning"  type="tint"    leadingElement={{ dot: true }} />
<CoreStatusBadge text="Primary"  status="primary"  type="tint"    leadingElement={{ dot: true }} />
</HStack>

Leading Loader

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreStatusBadge text="Loading" status="primary" type="tint"    leadingElement={{ loader: { color: 'primary' } }} />
<CoreStatusBadge text="Loading" status="default" type="outline" leadingElement={{ loader: { color: 'gray' } }} />
</HStack>

Leading / Trailing Icon

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreStatusBadge
  text="Error"
  status="error"
  type="tint"
  size="md"
  leadingElement={<IconErrorFilled size="$icon-xs" style={{ flex: 'none' }} />}
/>
<CoreStatusBadge
  text="Badge"
  status="default"
  type="outline"
  size="md"
  leadingElement={{ dot: true }}
  trailingElement={<IconCloseOutline size="$icon-xs" style={{ flex: 'none' }} />}
/>
</HStack>

크기 비교

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreStatusBadge text="sm" size="sm" type="outline" />
<CoreStatusBadge text="md" size="md" type="outline" />
<CoreStatusBadge text="lg" size="lg" type="outline" />
<CoreStatusBadge text="xl" size="xl" type="outline" />
</HStack>

아이콘 전용 (text 없음)

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreStatusBadge size="sm" type="outline" leadingElement={{ dot: true }} />
<CoreStatusBadge size="md" type="outline" leadingElement={{ dot: true }} />
<CoreStatusBadge size="lg" type="tint"    status="success" leadingElement={{ dot: true }} />
</HStack>

Props

ComponentPropsWithoutRef<'div'>를 확장한 컴포넌트입니다.

Prop

Type

CoreStatusBadgeStatus

Prop

Type

CoreStatusBadgeType

Prop

Type

CoreStatusBadgeSize

Prop

Type

스타일

display: flex, align-items: center
border-radius: radius-full
border: 1px solid
flex-shrink: 0

Size Variants

size	높이	최소 너비	Padding X	Gap	Loader Size
`sm`	16px	16px	4px	2px	`xxs` (8px)
`md`	20px	20px	6px	4px	`xxs` (8px)
`lg`	24px	24px	8px	6px	`xs` (16px)
`xl`	30px	30px	10px	8px	`xs` (16px)

leadingElement / trailingElement에 { loader: ... }를 전달하면 위 매핑에 따라 자동으로 size가 결정됩니다.

Typography

size	토큰
`sm`	`body[1]`
`md`	`body[1]`
`lg`	`body[2]`
`xl`	`body[3]`

Status × Type 색상 토큰

default

type	background	border	color
`filled`	`gray-40`	`gray-40`	`white`
`outline`	`white`	`border-1`	`text-3`
`tint`	`gray-10`	`border-1`	`text-3`
`subtle`	`white`	`white`	`text-3`

error

type	background	border	color
`filled`	`support-error-3`	`support-error-3`	`white`
`outline`	`white`	`support-error-2`	`support-error-4`
`tint`	`support-error-1`	`support-error-2`	`support-error-4`
`subtle`	`white`	`white`	`support-error-4`

warning / success / primary / informative

동일한 패턴으로 각 시맨틱 토큰(support-warning-*, support-success-*, support-info-*, gray-*)이 적용됩니다.

마이그레이션 가이드

신규 StatusBadge 컴포넌트는 $css prop과 반응형 size를 지원합니다.

Before / After

// Before — CoreStatusBadge
<CoreStatusBadge
  text="완료"
  status="success"
  type="tint"
  size="md"
  leadingElement={{ dot: true }}
/>

// After — StatusBadge
<StatusBadge
  text="완료"
  status="success"
  type="tint"
  size="md"
  leadingElement={{ dot: true }}
/>

변경 사항

CoreStatusBadge	StatusBadge
`status`, `type`, `size`	동일
`leadingElement` / `trailingElement`	동일
`size` — 정적 string	`size` — 반응형 객체 지원
`import { CoreStatusBadge }`	`import { StatusBadge }`

On this page