Badge
다른 컴포넌트에 붙어 알림, 항목의 개수, 상태를 나타냅니다.
Live Demo
Dot Badge
Counter Badge
599120Size
55Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'counter' | 'dot' | 'counter' | Badge의 스타일을 지정합니다. |
| color | 'emphasis' | 'grey800' | 'grey700' | 'emphasis' | Color 가 정의 되기 전까지는 MUI의 Token을 사용하려 합니다. |
| size | 'small' | 'medium' | 'medium' | Badge의 크기를 지정합니다. |
| badgeContent | number | - | Badge에 표시할 숫자입니다. (0~100) |
| max | number | - | Badge에 표시할 최대 숫자입니다. (0~100) |
| anchorOrigin | { vertical: "top" | "bottom", horizontal: "right" | "left" } | { vertical: "top", horizontal: "right" } | Badge의 위치를 지정합니다. |
| showZero | boolean | false | 0일 때도 Badge를 표시할지 여부를 지정합니다. |
Anatomy
- Container
- Number