CoreStatusBadge

Usage

기본 사용법

import { CoreStatusBadge } from '@featuring-corp/components';

<CoreStatusBadge 
  text="Badge" 
  size="md" 
  type="outline" 
  leadingElement={{ dot: true }} 
/>

다양한 Status와 Type 조합

import { CoreStatusBadge } from '@featuring-corp/components';

// Default
<CoreStatusBadge text="Badge" status="default" type="subtle" />
<CoreStatusBadge text="Badge" status="default" type="outline" />
<CoreStatusBadge text="Badge" status="default" type="tint" />
<CoreStatusBadge text="Badge" status="default" type="filled" />

// Error
<CoreStatusBadge text="Badge" status="error" type="subtle" />
<CoreStatusBadge text="Badge" status="error" type="outline" />
<CoreStatusBadge text="Badge" status="error" type="tint" />
<CoreStatusBadge text="Badge" status="error" type="filled" />

// Warning
<CoreStatusBadge text="Badge" status="warning" type="subtle" />
<CoreStatusBadge text="Badge" status="warning" type="outline" />
<CoreStatusBadge text="Badge" status="warning" type="tint" />
<CoreStatusBadge text="Badge" status="warning" type="filled" />

// Success
<CoreStatusBadge text="Badge" status="success" type="subtle" />
<CoreStatusBadge text="Badge" status="success" type="outline" />
<CoreStatusBadge text="Badge" status="success" type="tint" />
<CoreStatusBadge text="Badge" status="success" type="filled" />

// Primary
<CoreStatusBadge text="Badge" status="primary" type="subtle" />
<CoreStatusBadge text="Badge" status="primary" type="outline" />
<CoreStatusBadge text="Badge" status="primary" type="tint" />
<CoreStatusBadge text="Badge" status="primary" type="filled" />

// Informative
<CoreStatusBadge text="Badge" status="informative" type="subtle" />
<CoreStatusBadge text="Badge" status="informative" type="outline" />
<CoreStatusBadge text="Badge" status="informative" type="tint" />
<CoreStatusBadge text="Badge" status="informative" type="filled" />

Leading Element - Dot

import { CoreStatusBadge } from '@featuring-corp/components';

<CoreStatusBadge 
  text="Badge" 
  size="md" 
  type="outline" 
  leadingElement={{ dot: true }} 
/>

Leading Element - Loader

import { CoreStatusBadge } from '@featuring-corp/components';

<CoreStatusBadge 
  text="Badge" 
  size="md" 
  status="primary" 
  type="outline" 
  leadingElement={{ loader: { color: 'primary' } }} 
/>

Leading Element - Icon

import { CoreStatusBadge } from '@featuring-corp/components';
import { IconErrorFilled } from '@featuring-corp/icons';
import { vars } from '@styles/theme.css';

<CoreStatusBadge 
  leadingElement={
    <IconErrorFilled 
      size="12px" 
      fill={vars.semantic.color.support.error[3]} 
      style={{ flex: 'none' }} 
    />
  } 
  type="outline" 
  size="md" 
/>

<CoreStatusBadge 
  leadingElement={
    <IconErrorFilled 
      size={14} 
      fill={vars.semantic.color.support.error[3]} 
      style={{ flex: 'none' }} 
    />
  } 
  type="outline" 
  size="md" 
/>

<CoreStatusBadge 
  leadingElement={
    <IconErrorFilled 
      size="16px" 
      fill={vars.semantic.color.support.error[3]} 
      style={{ flex: 'none' }} 
    />
  } 
  type="outline" 
  size="md" 
/>

Trailing Element

import { CoreStatusBadge } from '@featuring-corp/components';
import { IconErrorFilled } from '@featuring-corp/icons';
import { vars } from '@styles/theme.css';

<CoreStatusBadge 
  text="Badge" 
  size="md" 
  leadingElement={{ dot: true }} 
  trailingElement={
    <IconErrorFilled 
      size="12px" 
      fill={vars.semantic.color.support.error[3]} 
      style={{ flex: 'none' }} 
    />
  } 
  type="outline" 
/>

크기 설정

import { CoreStatusBadge } from '@featuring-corp/components';

<CoreStatusBadge text="Badge" size="sm" type="outline" />
<CoreStatusBadge text="Badge" size="md" type="outline" />
<CoreStatusBadge text="Badge" size="lg" type="outline" />

아이콘만 사용

import { CoreStatusBadge } from '@featuring-corp/components';
import { IconErrorFilled } from '@featuring-corp/icons';
import { vars } from '@styles/theme.css';

<CoreStatusBadge 
  leadingElement={
    <IconErrorFilled 
      size="12px" 
      fill={vars.semantic.color.support.error[3]} 
      style={{ flex: 'none' }} 
    />
  } 
  type="outline" 
  size="md" 
/>

Props

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

Prop

Type

CoreStatusBadgeStatus

Prop

Type

CoreStatusBadgeType

Prop

Type

CoreStatusBadgeSize

Prop

Type

CoreDotProps

CoreDot를 참조하세요.

CoreLoaderProps

CoreLoader를 참조하세요.

스타일

기본 스타일 속성

display: flex
justify-content: center
align-items: center
border-radius: radius-full
border-width: 1px
border-style: solid
flex-shrink: 0

Size Variants

Size	Height	Min Width	Padding X	Gap
`sm`	`16px`	`16px`	`spacing-100` (4px)	`spacing-50` (2px)
`md`	`20px`	`20px`	`spacing-150` (6px)	`spacing-100` (4px)
`lg`	`24px`	`24px`	`spacing-200` (8px)	`spacing-150` (6px)
`xl`	`30px`	`30px`	`spacing-250` (10px)	`spacing-200` (8px)

Icon Only Size

아이콘만 있는 뱃지의 경우:

Size	Width	Height
`sm`	`16px`	`16px`
`md`	`20px`	`20px`
`lg`	`24px`	`24px`
`xl`	`30px`	`30px`

Typography

Size	Typography
`sm`	`body[1]`
`md`	`body[1]`
`lg`	`body[2]`
`xl`	`body[3]`

Status & Type Variants (상태별 토큰)

각 status와 type 조합에 따른 배경색, 테두리색, 텍스트 색상:

Default

Filled: background-color: gray-40, border-color: gray-40, color: white
Outline: background-color: white, border-color: border-1, color: text-3
Tint: background-color: gray-10, border-color: border-1, color: text-3
Subtle: background-color: white, border-color: white, color: text-3

Error

Filled: background-color: support-error-3, border-color: support-error-3, color: white
Outline: background-color: white, border-color: support-error-2, color: support-error-4
Tint: background-color: support-error-1, border-color: support-error-2, color: support-error-4
Subtle: background-color: white, border-color: white, color: support-error-4

Warning

Filled: background-color: support-warning-3, border-color: support-warning-3, color: white
Outline: background-color: white, border-color: support-warning-2, color: support-warning-4
Tint: background-color: support-warning-1, border-color: support-warning-2, color: support-warning-4
Subtle: background-color: white, border-color: white, color: support-warning-4

Success

Filled: background-color: support-success-3, border-color: support-success-3, color: white
Outline: background-color: white, border-color: support-success-2, color: support-success-4
Tint: background-color: support-success-1, border-color: support-success-2, color: support-success-4
Subtle: background-color: white, border-color: white, color: support-success-4

Primary

Filled: background-color: support-info-3, border-color: support-info-3, color: white
Outline: background-color: white, border-color: support-info-2, color: support-info-4
Tint: background-color: support-info-1, border-color: support-info-2, color: support-info-4
Subtle: background-color: white, border-color: white, color: support-info-4

Informative

Filled: background-color: gray-90, border-color: gray-90, color: white
Outline: background-color: white, border-color: white, color: white
Tint: background-color: gray-50, border-color: gray-50, color: white
Subtle: background-color: white, border-color: white, color: white

On this page