Badge

개수나 짧은 상태를 글자로 표시. 점만 쓰지 않음.

개요

미리보기

예시 언어동작 줄이기

검토 필요

kind

tone

children

이름	타입	기본값	설명
`kind?`	`'label' \| 'count'`	`label`	label은 보이는 짧은 글자, count는 사람이 할 일의 개수.
`tone?`	`'neutral' \| 'attention'`	`neutral`	attention은 검토 필요처럼 사람이 할 일에만. 좋고 나쁨을 색으로 말하지 않는다.
`children?`	`ReactNode`	`검토 필요`	label: 보이는 글자. count: 무엇을 세는지(보조기기 전용). “{n}”이 있으면 숫자로 바꾸고, 없으면 뒤에 숫자를 붙인다.
`count?`	`number`	—	count일 때만. 0 이하면 그리지 않고 99를 넘으면 “99+”.
`ref`	—	—	ref는 <span>으로 전달된다. 그리지 않을 때(0, 빈 글자)는 null.
그 밖의 속성	—	—	id, aria-, data- 등 네이티브 span 속성은 그대로 전달된다. className·style은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 사람이 할 일의 개수(검토 필요 수)나 짧은 상태에만 쓴다.

이렇게 하지 않기 다시 들어오게 하려는 빨간 점은 쓰지 않는다. 0이면 숨긴다.

이렇게 하지 않기 점만 쓰거나 색만 바꿔 다른 상태를 말하지 않는다. 신뢰 상태는 Badge가 아니라 TrustLabel이다.

이렇게 하지 않기 새 기록 수나 활동량에는 쓰지 않는다.

토큰과 속성

이름	타입	기본값	설명
`kind?`	`'label' \| 'count'`	`label`	label은 보이는 짧은 글자, count는 사람이 할 일의 개수.
`tone?`	`'neutral' \| 'attention'`	`neutral`	attention은 검토 필요처럼 사람이 할 일에만. 좋고 나쁨을 색으로 말하지 않는다.
`children?`	`ReactNode`	`검토 필요`	label: 보이는 글자. count: 무엇을 세는지(보조기기 전용). “{n}”이 있으면 숫자로 바꾸고, 없으면 뒤에 숫자를 붙인다.
`count?`	`number`	—	count일 때만. 0 이하면 그리지 않고 99를 넘으면 “99+”.
`ref`	—	—	ref는 <span>으로 전달된다. 그리지 않을 때(0, 빈 글자)는 null.
그 밖의 속성	—	—	id, aria-, data- 등 네이티브 span 속성은 그대로 전달된다. className·style은 받지 않는다.