Badge

종류, 개수, 상태를 옆에 붙여 알리는 작은 표시예요. 누를 수 없어요. 누르면 동작을 실행해야 할 때는 Button을, 눌러서 켜고 꺼야 할 때는 Toggle을 써요.

사용 예시

문의 종류

목록의 항목마다 붙여 종류를 구분해요. 종류에는 색으로 나타낼 의미가 없어서 neutral로 둬요.

화면이 멈춰요신고

쓰는 법이 궁금해요질문

글씨를 키우고 싶어요요청

tsx

<div className="flex items-center gap-tight">  <span className="text-label">화면이 멈춰요</span>  <Badge>신고</Badge></div>

제목 옆

Badge는 크기가 하나라서 어떤 글자 크기 옆에도 그대로 써요.

화면이 멈춰요신고

tsx

<div className="flex items-center gap-2">  <span className="text-section">화면이 멈춰요</span>  <Badge>신고</Badge></div>

개수

안 읽은 수나 남은 개수를 이름 옆에 보일 때 써요.

안 읽음128

처리 중3

전체2493

tsx

<div className="flex items-center gap-tight">  <span className="text-label">안 읽음</span>  <Badge shape="pill">128</Badge></div>

확인할 개수

새로 온 편지처럼 확인해야 할 개수는 emphasis를 solid로 둬서 먼저 눈에 띄게 해요. 나머지 개수는 weak로 둬요.

받은 편지함12

보낸 편지함240

tsx

<div className="flex items-center justify-between">  <span className="text-label">받은 편지함</span>  <Badge color="danger" emphasis="solid" shape="pill">12</Badge></div><div className="flex items-center justify-between">  <span className="text-label">보낸 편지함</span>  <Badge shape="pill">240</Badge></div>

받은 편지함12

보낸 편지함240

임시 보관함3

권장

solid가 하나라서 확인할 개수가 바로 보여요.

받은 편지함12

보낸 편지함240

임시 보관함3

지양

모두 solid면 어느 개수를 먼저 확인해야 하는지 알 수 없어요.

새로 나옴

brand는 목록에서 눈에 띄어야 하는 항목 하나에만 써요. 나머지는 neutral로 둬요.

글씨를 키우고 싶어요NEW

화면이 멈춰요신고

쓰는 법이 궁금해요질문

tsx

<div className="flex items-center justify-between">  <span className="text-label">글씨를 키우고 싶어요</span>  <Badge color="brand">NEW</Badge></div><div className="flex items-center justify-between">  <span className="text-label">화면이 멈춰요</span>  <Badge>신고</Badge></div>

글씨를 키우고 싶어요NEW

화면이 멈춰요신고

쓰는 법이 궁금해요질문

권장

brand가 하나라서 새 항목이 바로 보여요.

글씨를 키우고 싶어요NEW

화면이 멈춰요신고

쓰는 법이 궁금해요질문

지양

모두 brand면 새 항목을 알아볼 수 없어요.

상태

info는 진행 중인 일, success는 끝난 일, warning은 살펴볼 일, danger는 막힌 일에 써요.

화면이 멈춰요처리 중

쓰는 법이 궁금해요완료

글씨를 키우고 싶어요대기

예전 화면이 좋아요반려

tsx

<div className="flex items-center justify-between">  <span className="text-label">화면이 멈춰요</span>  <Badge color="info">처리 중</Badge></div><div className="flex items-center justify-between">  <span className="text-label">쓰는 법이 궁금해요</span>  <Badge color="success">완료</Badge></div><div className="flex items-center justify-between">  <span className="text-label">글씨를 키우고 싶어요</span>  <Badge color="warning">대기</Badge></div><div className="flex items-center justify-between">  <span className="text-label">예전 화면이 좋아요</span>  <Badge color="danger">반려</Badge></div>

아이콘과 글자

글자 앞에 아이콘을 두면 상태를 빨리 알아볼 수 있어요.

완료반려

tsx

<Badge color="success">  <Check />  완료</Badge><Badge color="danger">  <Ban />  반려</Badge>

쓰는 법이 궁금해요완료

글씨를 키우고 싶어요대기

예전 화면이 좋아요반려

권장

상태가 Badge에 글자로 적혀 있어서 색을 구분하지 못해도 알 수 있어요.

쓰는 법이 궁금해요글씨를 키우고 싶어요예전 화면이 좋아요

지양

색만 다르고 Badge에는 문의 제목만 있어요. 색을 구분하지 못하면 반려된 문의를 알 수 없어요.

컨트롤

질문

color

emphasis

shape

tsx

<Badge>질문</Badge>

명세

이름
이름	값	기본
color	neutral, brand, info, success, warning, danger	neutral
나타낼 의미에 맞춰 골라요.
emphasis	weak, solid	weak
solid는 확인해야 할 개수처럼 먼저 눈에 띄어야 할 때 써요.
shape	square, pill	square
숫자에는 pill을 써요.
className	string	-