Components
Badge
Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.
Import
import { Badge } from '@vapor-ui/core';Preview
<Badge>Hello</Badge>
Props
Badge
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
color | 'primary' | 'hint' | 'danger' | 'success' | 'warning' | 'contrast' | 'primary' | 배지의 색상(의미)을 설정합니다. 예컨대 'success'는 성공 상태를, 'danger'는 오류 상태를 나타냅니다. |
size | 'sm' | 'md' | 'lg' | 'md' | 배지의 크기를 설정합니다. 'sm'은 작은 크기, 'lg'는 큰 크기를 의미합니다. |
shape | 'square' | 'pill' | 'square' | 배지의 모양을 설정합니다. 'square'는 둥근 사각형, 'pill'은 완전히 둥근 알약 형태입니다. |
Accessibility Table
Badge WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Badge는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.
컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
| Accessibility | Description |
|---|---|
| WCAG | WCAG 2.x criterion 1.4.3 (level AA)를 준수하고 있습니다. |