Badge
Badge는 상태나 중요성 및 이벤트 강조를 나타내는 레이블이며 빠른 인식을 제공해야 합니다.
중요한 정보에 강조 표시를하고 주로 텍스트에 2차 또는 추가 정보를 전달하는 데 사용됩니다.
인터랙티브 예제
아래 UI에서 다양한 속성을 직접 변경하여 Badge 컴포넌트의 모습을 확인해보세요.
Badge
labelstring
뱃지에 표시될 텍스트
sizeselect
뱃지의 크기
colorselect
뱃지의 색상
typeselect
뱃지의 스타일 타입
leadingIconpreset
앞쪽에 표시될 요소
trailingIconpreset
뒤쪽에 표시될 요소
기본 사용법
import { Badge } from '@ncds/ui-admin';
function App() {
return <Badge label="뱃지" />;
}
기본 Badge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Badge에 표시될 텍스트 |
| size | "xs" | "sm" | "md" | 'sm' | Badge의 크기 |
| color | "neutral" | "error" | "warning" | "success" | "blue" | "pink" | "disabled" | 'neutral' | Badge의 색상 |
| type | "pill-outline" | "pill-dark-color" | 'pill-outline' | Badge의 스타일 타입 |
크기
Badge는 세 가지 크기를 지원합니다: xs, sm, md
xs 크기sm 크기md 크기
색상
Badge는 다양한 색상을 지원합니다.
Pill Outline
neutralerrorwarningsuccessbluedisabled
Pill Dark Color
neutralerrorwarningsuccessbluepinkdisabled
아이콘
Badge는 leadingIcon prop을 통해 아이콘을 추가할 수 있습니다.
뱃지뱃지뱃지
Dark Color with Icon
뱃지뱃지뱃지