Badge / Status

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

StatusBadge로 짧은 상태를 보여주세요. 각 tone에 의미 있는 SVG를 추가합니다. 일반 라벨이나 개수에는 중립 표면에서 Badge를 사용하세요. Badge는 테두리가 없습니다. 상태 배지는 badge 배경 토큰의 밝은 tone 표면과 텍스트, 아이콘을 짝지으며 InlineMessage와 분리됩니다. 작은 상태 라벨은 12px, medium(500) weight를 사용해 가독성을 유지합니다. StatusDot은 말이 없는 상태입니다. 묶음의 개수처럼 옆 텍스트가 상태를 말할 때, 아바타의 상태 표식처럼 tone의 표식 색으로 납작한 점을 둡니다. 표식 색은 tone의 색조를 지키면서 어두운 면에서는 밝게, 밝은 면에서는 어둡게 맞춰 3:1을 지킵니다. 배지 글자색을 쓰면 잉크처럼 어두워지기 때문입니다. live는 상태가 이어지는 동안 점을 숨 쉬게 하고, attention은 답 기다림처럼 상태가 막 왔을 때 세 번 깜빡인 뒤 멈춥니다.

색이나 아이콘만으로 상태를 전달하지 마세요. 항상 텍스트 라벨을 포함하세요. StatusDot 옆에 두거나, 상태를 말하는 텍스트가 없으면 label을 주세요. 계속 부르려고 점을 깜빡이지 마세요. attention은 상태가 올 때만 깜빡입니다. 액션에는 Button을 사용하고 배지를 버튼처럼 꾸미지 마세요. 변경 사항은 role=status 문장 하나에서 알리고, 모든 배지에 live role을 두지 마세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Badge(text + optional icon) / StatusBadge(default semantic SVG + text) / StatusDot(dot; role=img with label, hidden without)

키보드와 접근성

배지는 정적 span이며 Tab 순서에 없습니다. 상태 변경을 알리려면 role=status를 문장 하나에 두세요.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Badge, Inline, StatusBadge, StatusDot, Text } from '@surflane/ui'

<Badge>3 environments</Badge>
<StatusBadge tone='success'>Passed</StatusBadge>
<div role='status'>
  <StatusBadge tone='progress'>Running</StatusBadge>
  <span>Deployment is in progress.</span>
</div>
<Inline gap={2}>
  <StatusDot tone='progress' live />
  <Text as='span'>Working 2</Text>
</Inline>
<StatusDot tone='caution' attention label='Waiting for you' />

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰