0.0.3

Badge

A pure CSS component

Anatomy

There are 4 different badge anatomies, each requiring specific accessibility attributes.

Text Text and SVG B 
<span class="badge">
                  <span>Text</span>
                  </span>
                  <span class="badge">
                  <svg class="badge__icon" 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 class="badge__icon" 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

Text badge do not require additonal attibutes

Text and SVG

svg tag requires aria-hidden="true" to hide it from screen readers as the the text already include the necessary information

svg tag requires class="badge__icon"

SVG

a tag requires aria-label="Login to your account" to indicate indicate the action to the user

svg tag requires aria-hidden="true" to hide it from screen readers as the the text already include the necessary information

svg tag requires class="badge__icon"

One caracter

a tag requires aria-label="Login to your account" to indicate indicate the action to the user

Modifier

Each badge can be styled with modifiers.

You can mix as many modifiers on the same badge, however you can choose only one choice per modifer

For convenience the default variant name is omited, meaning there is no need to add the default name class

Modifier Option Description
Variant neutral (default), accent Used for different types of meanings
Color base (default), brand, alert Use any semantic colors
Font Color base (default), brand, alert Use any semantic colors.
Size md (default), sm, lg, xl Modify the size of the badge.
Shape rectangular (default), square, circle Modify the shape of the badge.

Variant

Set the variant of each badge

Options: neutral(default), accent

Text Text and SVG B Text Text and SVG B 
<span class="badge">
                  <span>Text</span>
                  </span>
                  <span class="badge">
                  <svg class="badge__icon" 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 class="badge__icon" 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>
                  <span class="badge  badge--accent">
                  <span>Text</span>
                  </span>
                  <span class="badge  badge--accent">
                  <svg class="badge__icon" 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 class="badge__icon" 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>

Color

Set the color of each badge

Options: base(default), brand, alert

Text Text Text and SVG Text and SVG B B Text Text Text and SVG Text and SVG B B 
<span class="badge  badge--brand">
                  <span>Text</span>
                  </span>
                  <span class="badge  badge--alert">
                  <span>Text</span>
                  </span>
                  <span class="badge  badge--brand">
                  <svg class="badge__icon" 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--alert">
                  <svg class="badge__icon" 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 class="badge__icon" 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">
                  <svg class="badge__icon" 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>
                  <span class="badge  badge--square  badge--alert" aria-label="Info about icon only badge">
                  B
                  </span>
                  <span class="badge  badge--accent  badge--brand">
                  <span>Text</span>
                  </span>
                  <span class="badge  badge--accent  badge--alert">
                  <span>Text</span>
                  </span>
                  <span class="badge  badge--accent  badge--brand">
                  <svg class="badge__icon" 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--accent  badge--alert">
                  <svg class="badge__icon" 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  badge--brand" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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  badge--alert" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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  badge--brand" aria-label="Info about icon only badge">
                  B
                  </span>
                  <span class="badge  badge--square  badge--accent  badge--alert" aria-label="Info about icon only badge">
                  B
                  </span>

Font Color

Set the font color of each badge

Options: base(default), brand, alert

Text Text Text and SVG Text and SVG B B Text Text Text and SVG Text and SVG B B 
<span class="badge badge--font-brand">
                  <span>Text</span>
                  </span>
                  <span class="badge badge--font-alert">
                  <span>Text</span>
                  </span>
                  <span class="badge badge--font-brand">
                  <svg class="badge__icon" 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--font-alert">
                  <svg class="badge__icon" 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--font-brand" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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--font-alert" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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--font-brand" aria-label="Info about icon only badge">
                  B
                  </span>
                  <span class="badge  badge--square badge--font-alert" aria-label="Info about icon only badge">
                  B
                  </span>
                  <span class="badge  badge--accent badge--font-brand">
                  <span>Text</span>
                  </span>
                  <span class="badge  badge--accent badge--font-alert">
                  <span>Text</span>
                  </span>
                  <span class="badge  badge--accent badge--font-brand">
                  <svg class="badge__icon" 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--accent badge--font-alert">
                  <svg class="badge__icon" 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 badge--font-brand" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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 badge--font-alert" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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 badge--font-brand" aria-label="Info about icon only badge">
                  B
                  </span>
                  <span class="badge  badge--square  badge--accent badge--font-alert" aria-label="Info about icon only badge">
                  B
                  </span>

Size

Set the size of each badge

Options: md(default), sm, lg, xl

Badge SM Badge SM B Badge MD Badge MD B Badge LG Badge LG B Badge XL Badge XL B 
<span class="badge  badge--sm">
                  Badge SM
                  </span>
                  <span class="badge  badge--sm">
                  <svg class="badge__icon" 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>
                  Badge SM
                  </span>
                  <span class="badge  badge--square  badge--sm" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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>
                  <span class="badge">
                  <span>Badge MD</span>
                  </span>
                  <span class="badge">
                  <svg class="badge__icon" 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>Badge MD</span>
                  </span>
                  <span class="badge  badge--square" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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>
                  <span class="badge  badge--lg">
                  <span>Badge LG</span>
                  </span>
                  <span class="badge  badge--lg">
                  <svg class="badge__icon" 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>Badge LG</span>
                  </span>
                  <span class="badge  badge--square  badge--lg" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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>
                  <span class="badge  badge--xl">
                  <span>Badge XL</span>
                  </span>
                  <span class="badge  badge--xl">
                  <svg class="badge__icon" 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>Badge XL</span>
                  </span>
                  <span class="badge  badge--square  badge--xl" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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>

Shape

Set the shape of each button

Options: rectangular(default), square, circle

B B B B 
<span class="badge  badge--square" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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>
                  <span class="badge  badge--circle" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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>
                  <span class="badge  badge--square  badge--accent" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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>
                  <span class="badge  badge--circle  badge--accent" aria-label="Info about icon only badge">
                  <svg class="badge__icon" 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  badge--accent" aria-label="Info about icon only badge">
                  B
                  </span>

RTL

RTL support for button with icon

النص والرمز 
<div dir="rtl">
                  <span class="badge">
                  <span>النص والرمز</span>
                  <svg class="badge__icon" 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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </span>
                  <span class="badge  badge--square" aria-label="معلومات حول شارة الرمز فقط">
                  <svg class="badge__icon" 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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </span>
                  </div>

Mix

Mix as many modifiers for each badge

Base Font-Base Base Font-Brand Base Font-Alert Brand Font-Base Brand Font-Brand Brand Font-Alert Alert Font-Base Alert Font-Brand Alert Font-Alert Accent Base Font-Base Accent Base Font-Brand Accent Base Font-Alert Accent Brand Font-Base Accent Brand Font-Brand Accent Brand Font-Alert Accent Alert Font-Base Accent Alert Font-Brand Accent Alert Font-Alert 
<span class="badge"><span>Base Font-Base</span></span>
                  <span class="badge badge--font-brand"><span>Base Font-Brand</span></span>
                  <span class="badge badge--font-alert"><span>Base Font-Alert</span></span>
                  <span class="badge  badge--brand"><span>Brand Font-Base</span></span>
                  <span class="badge  badge--brand badge--font-brand"><span>Brand Font-Brand</span></span>
                  <span class="badge  badge--brand badge--font-alert"><span>Brand Font-Alert</span></span>
                  <span class="badge  badge--alert"><span>Alert Font-Base</span></span>
                  <span class="badge  badge--alert badge--font-brand"><span>Alert Font-Brand</span></span>
                  <span class="badge  badge--alert badge--font-alert"><span>Alert Font-Alert</span></span>
                  <span class="badge  badge--accent"><span>Accent Base Font-Base</span></span>
                  <span class="badge  badge--accent badge--font-brand"><span>Accent Base Font-Brand</span></span>
                  <span class="badge  badge--accent badge--font-alert"><span>Accent Base Font-Alert</span></span>
                  <span class="badge  badge--accent  badge--brand"><span>Accent Brand Font-Base</span></span>
                  <span class="badge  badge--accent  badge--brand badge--font-brand"><span>Accent Brand
                  Font-Brand</span></span>
                  <span class="badge  badge--accent  badge--brand badge--font-alert"><span>Accent Brand
                  Font-Alert</span></span>
                  <span class="badge  badge--accent  badge--alert"><span>Accent Alert Font-Base</span></span>
                  <span class="badge  badge--accent  badge--alert badge--font-brand"><span>Accent Alert
                  Font-Brand</span></span>
                  <span class="badge  badge--accent  badge--alert badge--font-alert"><span>Accent Alert
                  Font-Alert</span></span>

Custom (Tailwind)

If you are using Tailwind styling, you can customize each button with Tailwind utilities

Text and SVG B Text and SVG B Text and SVG 
<span class="badge text-blue-600 border-yellow-700 [&amp;_svg]:text-purple-700">
                  Text and SVG
                  <svg class="badge__icon" 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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </span>
                  <span class="badge  badge--square ring-2 ring-slate-300" aria-label="Button text">
                  <svg class="badge__icon" 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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </span>
                  <span class="badge  badge--square bg-gray-100 text-gray-800 shadow-sm" aria-label="Button text">
                  B
                  </span>
                  <span class="badge  badge--accent [&amp;_svg]:text-amber-600">
                  Text and SVG
                  <svg class="badge__icon" 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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </span>
                  <span class="badge  badge--accent  badge--square ring-2 ring-rose-400" aria-label="Button text">
                  <svg class="badge__icon" 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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </span>
                  <span class="badge  badge--accent  badge--square font-bold border-2 border-accent" aria-label="Button text">
                  B
                  </span>
                  <span class="badge  badge--alert rounded-full mx-6 text-base-1 bg-green-700 justify-between">
                  Text and SVG
                  <svg class="badge__icon" 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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
                  </svg>
                  </span>

Templates

Button components is available in the followng templates

Avatar Button