uitissue-ui
llms.txt

배지

안정primitive

제목이나 항목 옆에 상태·이름표를 작게 붙입니다.

@tissue-ui/layout-react

설치

bash
npm install @tissue-ui/layout-react
tsx
import { Badge } from "@tissue-ui/layout-react";

언제 쓰나

  • 상태나 개수를 제목·항목 옆에 작게 표시할 때.

플레이그라운드

배지
tone
tsx
<Badge tone="blue">배지</Badge>

예제

톤(tone)
색으로 의미를 구분합니다. 기본은 중립(neutral).
기본정보완료대기오류신규
제목·항목 옆에 붙이기
제목 뒤 개수나 상태를 작게 덧붙일 때.
받은 편지함24읽지 않음 3
상태 매핑
값에 따라 톤을 정해 상태를 일관되게 표시합니다.
주문 1024배송 완료
주문 1025배송 중
주문 1026취소

속성

속성타입설명
toneneutral | blue | green | amber | red | violet색으로 의미를 구분합니다 (기본 중립).

위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.

상태
default
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.