배지 구성 요소

마지막 업데이트: 7월 13, 2026

기본, 보조, 악센트, 정보, 성공, 경고 및 오류 변형이 포함된 CSS 전용 Tailwind CSS 배지입니다. 소프트, 아웃라인 및 고스트 스타일, 크기 xs-lg. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

배지 구성 요소는 상태 정보를 강조 표시, 분류 또는 표시하는 데 사용되는 작고 컴팩트한 레이블입니다. 시맨틱 HTML 및 Tailwind CSS로 구축된 배지는 테이블, 카드, 사용자 프로필 및 알림 시스템에 유연하게 통합할 수 있도록 다양한 크기, 색상 및 스타일을 지원합니다. 가볍고 접근성이 뛰어난 배지는 시각적 혼란을 추가하지 않고도 정보 계층 구조를 향상시킵니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업	유형	설명
badge	베이스	작은 인라인 라벨
badge-outline	스타일	색상 테두리가 있는 투명 채우기
badge-soft	스타일	음소거된 색조 배경
badge-ghost	스타일	테두리가 없는 미묘한 배경
badge-dashed	스타일	점선 테두리 스타일
badge-pill	스타일	완전히 둥근 알약 모양
badge-rounded	스타일	적당한 반올림
badge-circle	스타일	단일 문자 또는 숫자에 대한 등폭 원
badge-square	스타일	반올림이 없는 정사각형
badge-xs	크기	아주 작은
badge-sm	크기	작은
badge-md	크기	중간(기본값)
badge-lg	크기	크기가 큰
badge-xl	크기	특대
badge-2xl	크기	2× 특대형
badge-primary	색상	기본 테마 색상
badge-secondary	색상	보조 테마 색상
badge-accent	색상	악센트 테마 색상
badge-neutral	색상	중립 테마 색상
badge-info	색상	정보 의미 색상
badge-success	색상	성공 의미 색상
badge-warning	색상	경고 의미 색상
badge-error	색상	오류 의미 색상

기본 사용법

<span class="badge">Badge</span>

<span className="badge">Badge</span>

코드 보기

배지 크기

<span class="badge badge-xs">Xsmall</span>
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>
<span class="badge badge-xl">Xlarge</span>
<span class="badge badge-2xl">2XLarge</span>

코드 보기

배지 색상

<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-neutral">Neutral</span>

코드 보기

배지 스타일

소프트 배지

<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>
<span class="badge badge-soft badge-neutral">Neutral</span>

코드 보기

개요 배지

<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-neutral">Neutral</span>

코드 보기

점선 배지

<span class="badge badge-dashed">Default</span>
<span class="badge badge-dashed badge-primary">Primary</span>
<span class="badge badge-dashed badge-secondary">Secondary</span>
<span class="badge badge-dashed badge-accent">Accent</span>
<span class="badge badge-dashed badge-info">Info</span>
<span class="badge badge-dashed badge-success">Success</span>
<span class="badge badge-dashed badge-warning">Warning</span>
<span class="badge badge-dashed badge-error">Error</span>
<span class="badge badge-dashed badge-neutral">Neutral</span>

코드 보기

고스트배지

<span class="badge badge-ghost">Ghost</span>

코드 보기

배지 모양

둥근 배지

<span class="badge badge-error badge-rounded">10</span>

코드 보기

알약 배지

<span class="badge badge-warning badge-pill">Pill badge</span>

코드 보기

정사각형 배지

<span class="badge badge-neutral badge-square">99+</span>

코드 보기

서클배지

<span class="badge badge-success badge-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
</span>

코드 보기

배지 표시기

빈 배지는 상태 표시기나 알림 점에 적합합니다.

<span class="badge badge-primary badge-circle badge-lg"></span>
<span class="badge badge-primary badge-lg"></span>
<span class="badge badge-primary badge-md"></span>
<span class="badge badge-primary badge-sm"></span>
<span class="badge badge-primary badge-xs"></span>

코드 보기

배지 구성

배지를 아이콘과 통합하거나 버튼과 같은 다른 구성 요소 안에 중첩하세요.

아이콘이 있는 배지

<span class="badge badge-info">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  Info
</span>
<span class="badge badge-success">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m9 12 2 2 4-4"></path>
  </svg>
  Success
</span>
<span class="badge badge-warning">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
    <path d="M12 9v4"></path>
    <path d="M12 17h.01"></path>
  </svg>
  Warning
</span>
<span class="badge badge-error">
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="m4.9 4.9 14.2 14.2"></path>
  </svg>
  Error
</span>

코드 보기

배지 내부 버튼

<button class="btn btn-primary btn-sm btn-active">
  Message
  <span class="badge badge-primary badge-xs">+49</span>
</button>
<button class="btn btn-sm">
  Inbox
  <span class="badge badge-xs badge-primary">+27</span>
</button>

코드 보기

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 배지 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요

배지 구성 요소

기본 사용법

배지 크기

배지 색상

배지 스타일

소프트 배지

개요 배지

점선 배지

고스트배지

배지 모양

둥근 배지

알약 배지

정사각형 배지

서클배지

배지 표시기

배지 구성

아이콘이 있는 배지

배지 내부 버튼

관련된