컴포넌트

배지

범주나 상태를 작고 읽기 쉽게 표시합니다.

색조, 점, 크기

neutralbluevioletambergreenred

SupportedPartialUnknown

smmd

A dot carries state; the text always says it.

사용 위치: Platform behavior.

사용법과 인터페이스

DemoBadge는 span.ui-badge를 렌더링하며 tone, variant(soft 또는 dot), size(sm 또는 md)를 데이터 속성에 대응시킵니다. 배지는 주석이므로 측정 대상인 flex, grid, float 레이아웃 밖에 배치하세요.

<DemoBadge tone="green" variant="dot">Supported</DemoBadge><DemoBadge size="sm">Static</DemoBadge>

<span class="ui-badge" data-tone="green" data-variant="dot">Supported</span><span class="ui-badge" data-size="sm">Static</span>