Badge
배지
배지는 다른 항목에 붙는 작고 클릭할 수 없는 표시입니다. 배지는 수치, 상태 또는 짧은 신호를 보여주며, 웹 표준이 아닌 디자인 패턴입니다.
실제 예시
받은편지함에는 읽지 않은 높은 우선순위 메시지 세 개가 있습니다. 받은편지함 텍스트와 접근성 이름 모두 배지를 별도의 키보드 이동 없이 개수를 제공합니다. 클릭 가능한 필터 필은 배지가 아니라 칩입니다.
주요 부분
- 01호스트 요소
- 02컴팩트 값
- 03접근 가능 동등물
사용할 때
이 용어는 주요 라벨이나 아이콘에 첨부된 작은 추가 상태나 수를 설명할 때 사용합니다.
다음 경우에는 사용하지 마세요
긴 필수 텍스트, 동작, 또는 색상으로만 표시되는 의미를 배지에 넣지 마세요.
코드에서 사용된 이름
label + noninteractive status indicator 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 배지 (Badge)。 User context：받은편지함에는 읽지 않은 높은 우선순위 메시지 세 개가 있습니다. 받은편지함 텍스트와 접근성 이름 모두 배지를 별도의 키보드 이동 없이 개수를 제공합니다. 클릭 가능한 필터 필은 배지가 아니라 칩입니다. Recommended pattern：배지 (Badge)。 Why it fits：이 용어는 주요 라벨이나 아이콘에 첨부된 작은 추가 상태나 수를 설명할 때 사용합니다. Do not use it when：긴 필수 텍스트, 동작, 또는 색상으로만 표시되는 의미를 배지에 넣지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 배지 (Badge) is used now. Definition: 배지는 다른 항목에 붙는 작고 클릭할 수 없는 표시입니다. 배지는 수치, 상태 또는 짧은 신호를 보여주며, 웹 표준이 아닌 디자인 패턴입니다. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.