Badge

상태, 카테고리, 라벨 등을 표시하는 뱃지 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add badge

사용법

TSX

import { Badge, StatusBadge } from "@msub-core/ui/components/badge"

function MyComponent() {
  return (
    <div>
      <Badge variant="success">완료</Badge>
      <StatusBadge status="new" />
    </div>
  )
}

기본

DefaultPrimarySecondary

Prop	Type	Default	Required	Description
variant	"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "error" \| "info" \| "purple"	"default"	No	뱃지 색상 변형
size	"sm" \| "default" \| "lg"	"default"	No	뱃지 크기
outline	boolean	false	No	테두리만 있는 스타일
dot	boolean	false	No	왼쪽에 점 표시
pulse	boolean	false	No	펄스 애니메이션 (dot과 함께 사용)
icon	ReactNode	-	No	왼쪽 아이콘

Variants

DefaultPrimarySecondarySuccessWarningErrorInfoPurple

Sizes

SmallDefaultLarge

Outline

DefaultPrimarySuccessWarningErrorInfoPurple

Dot

온라인자리비움오프라인라이브

아이콘

승인됨대기중오류추천빠른배송

StatusBadge 프리셋

NEW진행중완료대기취소됨임시저장

Prop	Type	Default	Required	Description
status	"new" \| "in-progress" \| "completed" \| "pending" \| "cancelled" \| "draft"	-	Yes	상태 종류
children	ReactNode	-	No	커스텀 라벨 (기본 라벨 대체)

실제 사용 예시

프로젝트 A진행중

마감일: 2024.12.31

중요

프로젝트 B완료

완료일: 2024.12.20

새로운 기능NEW

방금 추가됨

Beta