컴포넌트FOX · Badge
배지
항목 옆에 붙이는 짧은 이름표예요. 누를 수 없고, 상태나 종류를 한눈에 알려 줘요. 숫자 없이 새 소식만 알릴 때는 6px 점을 써요.
기본과 강조
기본은 옅은 바탕이에요. 눈에 꼭 띄어야 하는 하나에만 강조를 써요.
EMPHASIS
추천추천
<Badge color="purple">추천</Badge>
<Badge color="purple" emphasis="emphasized">추천</Badge>색
색마다 뜻이 정해져 있어요. 회색은 중립, 보라는 강조, 주황은 주의, 초록은 완료, 빨강은 위험이에요.
COLORS
대기
gray 기본
추천
purple 기본
확인 필요
orange 기본
완료
green 기본
연체
red 기본
대기
gray 강조
추천
purple 강조
확인 필요
orange 강조
완료
green 강조
연체
red 강조
<Badge color="gray">대기</Badge>
<Badge color="green">완료</Badge>
<Badge color="red" emphasis="emphasized">연체</Badge>알림 점
숫자가 필요 없는 새 소식은 점 하나로 알려요. 아이콘이나 글자 옆 위쪽에 붙여요.
DOT
알림혜택
<BadgeDot label="새 알림" />이렇게 써요
카드 대금연체
이렇게배지 글자는 두세 글자로 짧게 써요.
카드 대금납부 기한이 지났어요
이렇게 말고문장은 배지에 담기 어려워요. 본문 글로 풀어 써요.
완료
이렇게상태를 알리는 용도로만 써요.
눌러 보세요
이렇게 말고배지는 눌리지 않아요. 눌러야 하면 칩이나 버튼을 써요.
속성
| 속성 | 값 | 기본값 | 설명 |
|---|---|---|---|
color | "gray" | "purple" | "orange" | "green" | "red" | gray | 색으로 뜻을 나눈다 |
emphasis | "default" | "emphasized" | default | 옅은 바탕 또는 색을 꽉 채움 |
label | string | 새 소식 | BadgeDot. 화면 읽기 도구가 읽을 이름 |