배지 · 태그 · uyoolabs ui

배지 · 태그

배지는 상태 · 분류를 짧게 붙이는 평평한 라벨이고, 태그(칩)는 켜거나 지울 수 있는 작은 키캡입니다.

배지는 누를 수 없어 두께가 없습니다. 톤은 다섯 가지이고 이름은 토큰과 같습니다(neutral · info · ok · warn · bad). 표 · 목록 안의 상태는 배지 대신 상태 글리프 + 글자(StatusLabel)로 씁니다.

칩은 오른쪽 아래로 (1, 1) 두께가 있습니다. 손을 올리면 1px 솟고, 누르면 가라앉고, 켜면 가라앉은 채로 남습니다. 켠 표시는 체크 하나와 굵은 글자이고 색만으로 말하지 않습니다.

import: import { Badge, StatusBadge, CountBadge, Tag, FilterChip, ChoiceChips, ChoiceChip } from "@uyoolabs/ui/ui";
쓰는 경우: 카드 · 상세 머리의 상태 요약, 분류 라벨에 Badge 를, 앱의 상태 값에는 라벨 표와 StatusBadge 를 씁니다. 확인할 것 · 안 읽음 · 멘션 개수는 CountBadge, 칸에 들어간 값은 Tag, 켜고 끄는 거르기는 FilterChip, 하나만 고르는 짧은 선택지는 ChoiceChips 를 씁니다.
쓰지 않는 경우: 다섯 톤 밖의 색을 만들지 않고 className 으로 배경 · 글자색을 덮지 않습니다. 개수에 경고색 · 빨강을 쓰지 않습니다. 칩을 바닥(--uyoo-bg) 위에 두지 않고 카드 · 솟은 면 위에 둡니다. 배지는 줄바꿈 · 말줄임 없이 짧게 씁니다(한 · 일 8자, 영 16자 안쪽).

tone 을 생략하면 neutral 입니다. dot · icon 은 장식이고 글자가 상태를 말합니다.

tone	글자 · 점 · lg	토큰(글자 / 면)
neutral	보관됨보관됨보관됨	--uyoo-neutral-text / --uyoo-neutral-tint
info	초대됨초대됨초대됨	--uyoo-info-text / --uyoo-info-tint
ok	운영 중운영 중운영 중	--uyoo-ok-text / --uyoo-ok-tint
warn	검토 대기검토 대기검토 대기	--uyoo-warn-text / --uyoo-warn-tint
bad	실패실패실패	--uyoo-bad-text / --uyoo-bad-tint

라벨 표의 { label, tone } 을 받아 Badge 톤으로 바꿉니다.

활성정지보관

0 이면 그리지 않습니다. 숫자는 aria-hidden 이고 '확인할 것 12개' 같은 문장을 스크린 리더에 둡니다. 나를 부른 것(멘션 · 알림)만 strong 입니다.

지우면 포커스가 다음 칩(없으면 이전 칩, 그것도 없으면 returnFocusRef)으로 갑니다. 지운 것을 따로 알리지 않습니다.

디자인상태:진행 중결제팀kim@pay

초대 입력 · 다중 선택은 useTagInput 으로 키보드를 맞춥니다. Enter 로 더하고, 빈 칸에서 Backspace 두 번으로 지웁니다. 한 · 일 IME 조합 중의 Enter · Backspace 는 무시합니다.

한서윤이도윤

키	동작
`Tab`	지우기 단추 · 거르기 칩으로 옮깁니다. 묶음 칩(ChoiceChips)은 Tab 정지가 하나입니다.
`EnterSpace`	칩을 지우거나(Tag) 켜고 끕니다(FilterChip).
`←→↑↓`	ChoiceChips 안에서 옮기는 동시에 고릅니다. 끝에서 처음으로 돕니다.
`HomeEnd`	ChoiceChips 의 처음 · 끝 칩을 고릅니다.
`Backspace`	입력 칸이 비었을 때 마지막 칩을 고르고, 한 번 더 누르면 지웁니다(useTagInput). IME 조합 중에는 무시합니다.

소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.

prop	타입	기본값	설명
tone	"neutral" \| "info" \| "ok" \| "warn" \| "bad"	"neutral"	기본 neutral. 다섯 톤 밖의 색은 만들지 않는다
size	"md" \| "lg"	"md"	md 20(12/500) · lg 24(13)
dot	boolean	—	글자 앞 6px 점(톤의 아이콘 색). 글자가 상태를 말하고 점은 거든다
icon	ReactNode	—	12px(lg 14px) 아이콘. dot 과 함께 쓰지 않는다
children필수	ReactNode	—

이 밖에 <span> props(children 제외)를 그대로 받습니다.

prop	타입	기본값	설명
value필수	number	—	0 이하이면 아무것도 그리지 않는다
max	number	99	넘으면 99+
tone	"neutral" \| "strong"	"neutral"	strong 은 primary 면. 나를 부른 것(멘션 · 알림)에만
dot	boolean	—	숫자 없이 '새것 있음' 8px 점
lang	"ko" \| "en" \| "ja"	—
labels	Partial<CountBadgeLabels>	—

이 밖에 <span> props(children 제외)를 그대로 받습니다.

prop	타입	기본값	설명
children필수	ReactNode	—	보이는 글자. 240px 에서 말줄임하고 전체는 title 로 둔다
keyLabel	ReactNode	—	상태: 같은 키(보조색). 값이 있는 필터 칩에 쓴다
avatar	ReactNode	—	사람 칩: 왼쪽 끝에 붙는 아바타(xs 20)
onRemove	() => void	—	없으면 지우기 단추가 없다
returnFocusRef	RefObject<HTMLElement \| null>	—	지운 뒤 다음 · 이전 칩이 없으면 포커스를 돌려줄 곳(연결된 입력 칸)
readOnly	boolean	—	평평하고 지우기 단추가 없다
invalid	boolean	—	경계 · 아이콘 · 글자가 오류 색이고 이름 뒤에 labels.invalid 를 sr 로 붙인다
disabled	boolean	—
selected	boolean	—	입력 칸 안에서 Backspace 로 골라 둔 칩(useTagInput 의 selected)
size	"sm" \| "md"	"md"	sm 24(표 툴바 · 조밀) · md 28
lang	"ko" \| "en" \| "ja"	—
labels	Partial<TagLabels>	—

이 밖에 <span> props(children 제외)를 그대로 받습니다.

이 밖에 <button> props(children · onChange 제외)를 그대로 받습니다.

prop	타입	기본값	설명
value	string	—	제어
defaultValue	string	—	비제어 시작값
onValueChange	(value: string) => void	—
aria-label필수	string	—	묶음 이름. 무엇을 고르는지(기간 · 회의 길이)
size	"sm" \| "md"	"md"
children필수	ReactNode	—	<ChoiceChip value="30">30분</ChoiceChip>

이 밖에 <div> props(onChange · defaultValue 제외)를 그대로 받습니다.

prop	타입	기본값	설명
value필수	string	—
children필수	ReactNode	—

이 밖에 <button> props(children · value 제외)를 그대로 받습니다.