# Badge
A pure Tailwind CSS component
# Anatomy
There are 4 different badge anatomies, each requiring specific classes and accessibility attributes.
Text
Text and SVG
B
<span class="badge">
<span>Text</span>
</span>
<span class="badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square" aria-label="Info about icon only badge">
B
</span>
Text badges
- Text badges do not require additional attributes.
Text and SVG
svgtag requiresaria-hidden="true"to hide it from screen readers as the text already includes the necessary informationsvgtag requiresclass="icon"
SVG
spantag requiresaria-label="Login to your account"to indicate the content to the usersvgtag requiresaria-hidden="true"to hide it from screen readers as the text already includes the necessary informationsvgtag requiresclass="icon"
One Character
spantag requiresaria-label="Login to your account"to indicate the content to the user
# RTL
RTL support for badge
النص والرمز
<div dir="rtl">
<span class="badge">
<span>النص والرمز</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square" aria-label="معلومات حول شارة الرمز فقط">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
</div>
# Disabled
Disabled support for badge.
Text
Text and SVG
B
<span class="badge" disabled>
<span>Text</span>
</span>
<span class="badge" disabled>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square" aria-label="Info about icon only badge" disabled>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square" aria-label="Info about icon only badge" disabled>
B
</span>
# Modifiers
Badges support modifier classes that control their appearance.
You can combine multiple modifiers on the same badge.
The default modifier is applied automatically, so you don’t need to include it explicitly.
| Modifier | Description |
|---|---|
| Color | Sets the color theme of the badge. |
| Size | Adjusts the overall size of the badge. |
| Shape | Set the shape of the badge |
You may have noticed the double dash before the modifier name — this follows the BEM (Block Element Modifier) naming convention
# Color
Use class="badge--{color}" to set the color of a badge.
Available options:
default, accent, brand, alert, info, success
Text
Text and SVG
B
Text
Text and SVG
B
Text
Text and SVG
B
Text
Text and SVG
B
Text
Text and SVG
B
<div>
<span class="badge badge--accent">
<span>Text</span>
</span>
<span class="badge badge--accent">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--accent" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--accent" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge badge--brand">
<span>Text</span>
</span>
<span class="badge badge--brand">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--brand" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--brand" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge badge--alert">
<span>Text</span>
</span>
<span class="badge badge--alert">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--alert" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--alert" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge badge--info">
<span>Text</span>
</span>
<span class="badge badge--info">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--info" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--info" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge badge--success">
<span>Text</span>
</span>
<span class="badge badge--success">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--success" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--success" aria-label="Info about icon only badge">
B
</span>
</div>
# Size
Use class="badge--{size}" to set the size of a badge.
Available options:
sm, md (default), lg, xl
Text
Text and SVG
B
Text
Text and SVG
B
Text
Text and SVG
B
Text
Text and SVG
B
<div>
<span class="badge badge--sm">
<span>Text</span>
</span>
<span class="badge badge--sm">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--sm" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--sm" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge">
<span>Text</span>
</span>
<span class="badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge badge--lg">
<span>Text</span>
</span>
<span class="badge badge--lg">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--lg" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--lg" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge badge--xl">
<span>Text</span>
</span>
<span class="badge badge--xl">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
<span>Text and SVG</span>
</span>
<span class="badge badge--square badge--xl" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square badge--xl" aria-label="Info about icon only badge">
B
</span>
</div>
# Shape
Set the shape of each button. This modifier will only work on SVG only and one carater badge.
Options: square(default), circle
B
B
<div>
<span class="badge badge--square" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--square" aria-label="Info about icon only badge">
B
</span>
</div>
<div>
<span class="badge badge--circle" aria-label="Info about icon only badge">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z">
</path>
</svg>
</span>
<span class="badge badge--circle" aria-label="Info about icon only badge">
B
</span>
</div>
# Installation
To apply the default Corex UI design system styles, import the stylesheet:
@import "@corex-ui/design/components/badge.css";
Then apply the base class along with any desired modifiers:
<span class="badge">...</span>