Badge
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/badge.css" />
Status
Primary
1
Secondary
1
Error
1
Warning
1
Success
1
Outline
1
Examples
1234
New
Beta
Error
!
✓
Draft
Specs
| 요소 | Height | Min-Width | Padding | Font | Border Radius |
|---|---|---|---|---|---|
| Badge | 28px | 28px | 4px 8px (--spacing-1 --spacing-2) | 14px / Regular | 9999px (--radius-full) |
Code
<span class="badge badge--primary">1</span> <span class="badge badge--secondary">New</span> <span class="badge badge--error">!</span> <span class="badge badge--warning">Beta</span> <span class="badge badge--success">✓</span> <span class="badge badge--outline">Draft</span>
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .badge | 루트 | 배지 기본 스타일 |
| .badge--primary | 수정자 | Primary — 초록 |
| .badge--secondary | 수정자 | Secondary — 파랑 |
| .badge--error | 수정자 | Error — 빨강 |
| .badge--warning | 수정자 | Warning — 노랑 |
| .badge--success | 수정자 | Success — 초록 (연한) |
| .badge--outline | 수정자 | Outline — 테두리만 |