콘텐츠 / badge
Badge
상태·분류를 나타내는 소형 인라인 라벨.
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
상태·분류를 나타내는 소형 인라인 라벨.
Workbench 불러오는 중…
Component intent의도와 경계 읽기
의미 색상(success/warning/danger/info/accent)을 가진 <span> 토큰이다. default 변형은 base 클래스만 붙고, 나머지 변형은 `axe-badge--<variant>` 를 추가한다. 순수 표시 요소라 상호작용/role 이 없으며, className 과 나머지 HTML 속성은 루트 <span> 으로 전파된다.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
의미 색상
import { Badge } from "@axe/ui";export function Example() { return ( <> <Badge variant="success">활성</Badge> <Badge variant="warning">보류</Badge> <Badge variant="danger">실패</Badge> </> );}CSS-only (비-React)
<span class="axe-badge axe-badge--success">활성</span><span class="axe-badge">중립</span>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
variant | "default" | "accent" | "success" | "warning" | "danger" | "info" | — | "default" | 의미 색상. default 는 modifier 없이 중립 톤, 나머지는 각 의미 색을 입힌다. |
...rest | React.HTMLAttributes<HTMLSpanElement> | — | — | className 병합 후 나머지 속성은 루트 <span> 으로 전파. |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-badge | stable | 배지 루트 <span> (default 톤 포함). |
.axe-badge--accent | stable | accent(기능 강조) 변형. |
.axe-badge--success | stable | 성공/정상 변형. |
.axe-badge--warning | stable | 주의 변형. |
.axe-badge--danger | stable | 위험/오류 변형. |
.axe-badge--info | stable | 정보 변형. |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
ARIA
네이티브 <span> — 별도 role 없음. 스크린리더는 텍스트 콘텐츠만 읽으므로 의미를 색에만 의존시키지 말고 라벨 텍스트로도 전달할 것.
Notes
default 변형은 modifier 클래스가 붙지 않는다(base 클래스가 곧 default 룩).
06 · Judgment