Components
Badge
Badge는 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.
속성 | 값 | 기본값 |
---|
size | medium, large | medium |
variant | weak, solid, outline | weak |
tone | neutral, brand, informative, positive, warning, critical | neutral |
size=large
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | maxWidth | |
| | minHeight | |
| | paddingX | |
| | paddingY | |
| | cornerRadius | |
| label | fontSize | |
| | lineHeight | |
size=medium
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | maxWidth | |
| | minHeight | |
| | paddingX | |
| | paddingY | |
| | cornerRadius | |
| label | fontSize | |
| | lineHeight | |
variant=weak
상태 | 슬롯 | 속성 | 값 |
---|
enabled | label | fontWeight | |
variant=solid
상태 | 슬롯 | 속성 | 값 |
---|
enabled | label | fontWeight | |
variant=outline
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | strokeWidth | |
| label | fontWeight | |
tone=neutral, variant=weak
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=neutral, variant=solid
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=neutral, variant=outline
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | strokeColor | |
| label | color | |
tone=brand, variant=weak
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=brand, variant=solid
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=brand, variant=outline
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | strokeColor | |
| label | color | |
tone=informative, variant=weak
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=informative, variant=solid
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=informative, variant=outline
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | strokeColor | |
| label | color | |
tone=positive, variant=weak
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=positive, variant=solid
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=positive, variant=outline
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | strokeColor | |
| label | color | |
tone=warning, variant=weak
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=warning, variant=solid
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=warning, variant=outline
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | strokeColor | |
| label | color | |
tone=critical, variant=weak
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=critical, variant=solid
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | color | |
| label | color | |
tone=critical, variant=outline
상태 | 슬롯 | 속성 | 값 |
---|
enabled | root | strokeColor | |
| label | color | |