Components
Badge
Adds a short status to whatever it labels. By default it's an informational element with no click behavior.짧은 텍스트로 대상의 상태를 보충합니다. 기본적으로 클릭 기능이 없는 정보 요소입니다.
Variants
Live previewDYNGLE UI
New connection새로운 연결Done완료Needs review확인 필요Failed실패Draft초안Newv0.3
Markup
<span class="dy-badge">New connection</span>
<span class="dy-badge positive"><span class="dot"></span>Done</span>
<span class="dy-badge warning">Needs review</span>
<span class="dy-badge critical">Failed</span>
<span class="dy-badge neutral">Draft</span>
<span class="dy-badge lime">New</span><span class="dy-badge">새로운 연결</span>
<span class="dy-badge positive"><span class="dot"></span>완료</span>
<span class="dy-badge warning">확인 필요</span>
<span class="dy-badge critical">실패</span>
<span class="dy-badge neutral">초안</span>
<span class="dy-badge lime">New</span>Usage사용 기준
Same status, same badge같은 상태엔 같은 배지
Keep status names short, and use the same color and wording for the same status everywhere.상태 이름은 짧게 쓰고, 같은 상태에는 어디서나 같은 색상과 문구를 사용합니다.
Don't mix colors or wording for one status, or write sentences inside a badge.한 상태에 여러 색, 문구를 섞거나, 배지 안에 문장을 쓰지 않습니다.
Badges aren't buttons배지는 버튼이 아닙니다
For selectable filters, use Chips with a pressed state. Badges only describe.선택 가능한 필터에는 눌림 상태가 있는 Chip을 씁니다. 배지는 설명만 합니다.
Don't make badges clickable filters; they have no selected state or focus behavior.배지를 클릭 필터로 쓰지 않습니다. 선택 상태와 포커스 동작이 없습니다.