Basic

Buttons, badges, avatars, loaders, progress bars and other building blocks.

Button

Buttons allow users to trigger an action or event with a single click. They are a core interactive element in any application interface.

Base button

<button class='btn'>Base button</button>

Filled button

<button class='btn btn-primary'>Primary</button>
<button class='btn btn-secondary'>Secondary</button>
<button class='btn btn-info'>Info</button>
<button class='btn btn-success'>Success</button>
<button class='btn btn-warning'>Warning</button>
<button class='btn btn-danger'>Danger</button>
<button class='btn btn-neutral'>Neutral</button>
<button class='btn btn-link'>Link</button>

Subtle button

<button class='btn btn-subtle-primary'>Primary</button>
<button class='btn btn-subtle-secondary'>Secondary</button>
<button class='btn btn-subtle-info'>Info</button>
<button class='btn btn-subtle-success'>Success</button>
<button class='btn btn-subtle-warning'>Warning</button>
<button class='btn btn-subtle-danger'>Danger</button>
<button class='btn btn-subtle-neutral'>Neutral</button>

Outlined button

<button class='btn btn-outline-primary'>Primary</button>
<button class='btn btn-outline-secondary'>Secondary</button>
<button class='btn btn-outline-info'>Info</button>
<button class='btn btn-outline-success'>Success</button>
<button class='btn btn-outline-warning'>Warning</button>
<button class='btn btn-outline-danger'>Danger</button>
<button class='btn btn-outline-neutral'>Neutral</button>

Text button

<button class='btn btn-text-primary'>Primary</button>
<button class='btn btn-text-secondary'>Secondary</button>
<button class='btn btn-text-info'>Info</button>
<button class='btn btn-text-success'>Success</button>
<button class='btn btn-text-warning'>Warning</button>
<button class='btn btn-text-danger'>Danger</button>
<button class='btn btn-text-neutral'>Neutral</button>

Button sizes

<button class='btn btn-primary btn-sm'>Small</button>
<button class='btn btn-primary'>Medium</button>
<button class='btn btn-primary btn-lg'>Large</button>

Button shape

<div class='space-x-2'>
  <button class='btn btn-primary btn-square btn-sm'>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
      <path fill="currentColor" d="M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
    </svg>
  </button>
  <button class='btn btn-primary btn-square'>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
      <path fill="currentColor" d="M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
    </svg>
  </button>
  <button class='btn btn-primary btn-square btn-lg'>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill="currentColor" d="M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
    </svg>
  </button>
</div>
<div class='space-x-2'>
  <button class='btn btn-secondary btn-circle btn-sm'>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
      <path fill="currentColor" d="M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
    </svg>
  </button>
  <button class='btn btn-secondary btn-circle'>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
      <path fill="currentColor" d="M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
    </svg>
  </button>
  <button class='btn btn-secondary btn-circle btn-lg'>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill="currentColor" d="M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/>
    </svg>
  </button>
</div>

Buttons with icons and label

<button class='btn btn-danger'>
  Google
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd">
    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/>
    <path fill="currentColor" d="M12 5.5a6.5 6.5 0 1 0 6.326 8H13a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 1.5 1.5a9.5 9.5 0 1 1-2.801-6.736a1.5 1.5 0 1 1-2.116 2.127A6.48 6.48 0 0 0 12 5.5"/></g>
  </svg>
</button>
<button class='btn btn-info'>
  Twitter
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g fill="none">
    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/>
    <path fill="currentColor" d="M4.594 4.984a1 1 0 0 1 .941.429C7.011 7.572 8.783 8.47 10.75 8.674c.096-.841.323-1.672.75-2.404c.626-1.074 1.644-1.864 3.098-2.156c2.01-.404 3.54.324 4.427 1.215l1.792-.335a1 1 0 0 1 1.053 1.478l-1.72 3.022c.157 4.361-1.055 7.405-3.639 9.502c-1.37 1.112-3.332 1.743-5.485 1.938c-2.17.196-4.623-.041-7.061-.753a1 1 0 0 1 .007-1.922c1.226-.349 2.16-.65 3.003-1.177c-1.199-.636-2.082-1.468-2.707-2.416c-.868-1.318-1.19-2.788-1.254-4.113S3.141 8 3.343 7.115c.115-.505.249-1.011.434-1.495a1 1 0 0 1 .818-.636Z"/></g>
  </svg>
</button>

Icon button

<button class='btn btn-icon'>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0"/>
  </svg>
</button>
<button class='btn btn-icon btn-icon-primary'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3"/>
</svg>
</button>
<button class='btn btn-icon btn-icon-danger rounded-full'>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0"/>
  </svg>
</button>
<button class='btn btn-icon' disabled>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0"/>
  </svg>
</button>

Sizes

<button class='btn btn-icon btn-sm'>
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
    <path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zm-7 11q.425 0 .713-.288T11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17m4 0q.425 0 .713-.288T15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17M7 6v13z"/>
  </svg>
</button>
<button class='btn btn-icon btn-sm'>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
    <path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zm-7 11q.425 0 .713-.288T11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17m4 0q.425 0 .713-.288T15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17M7 6v13z"/>
  </svg>
</button>
<button class='btn btn-icon btn-lg'>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zm-7 11q.425 0 .713-.288T11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17m4 0q.425 0 .713-.288T15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17M7 6v13z"/>
  </svg>
</button>
<button class='btn btn-icon btn-lg'>
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
    <path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zm-7 11q.425 0 .713-.288T11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17m4 0q.425 0 .713-.288T15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17M7 6v13z"/>
  </svg>
</button>

Block button

<button class='btn btn-primary w-full'>Block button</button>
<button class='btn btn-secondary w-full'>Block button</button>

Gradient button

<button class="btn bg-linear-to-r from-cyan-400 to-blue-500 text-white border-0">
  Primary
</button>
<button class="btn bg-linear-to-br from-purple-400 to-blue-500 text-white border-0">
  Secondary
</button>
<button class="btn bg-linear-to-r from-cyan-400 to-sky-500 text-white border-0">
  Info
</button>
<button class="btn bg-linear-to-br from-green-400 to-blue-500 text-white border-0">
  Success
</button>
<button class="btn bg-linear-to-br from-orange-400 to-rose-500 text-white border-0">
  Warning
</button>
<button class="btn bg-linear-to-br from-pink-400 to-red-500 text-white border-0">
  Danger
</button>
<button class="btn bg-linear-to-r from-slate-200 to-gray-300 text-slate-800 border-0">
  Neutral
</button>

Colored shadows

<button class='btn btn-primary shadow-sm shadow-primary/30'>Primary</button>
<button class='btn btn-secondary shadow-sm shadow-secondary/30'>Secondary</button>
<button class='btn btn-info shadow-sm shadow-info/30'>Info</button>
<button class='btn btn-success shadow-sm shadow-success/30'>Success</button>
<button class='btn btn-warning shadow-sm shadow-warning/30'>Warning</button>
<button class='btn btn-danger shadow-sm shadow-danger/30'>Danger</button>
<button class='btn btn-neutral shadow-sm shadow-dark/30'>Neutral</button>

Opacities

<button class='btn btn-primary opacity-100'>Opacity-100</button>
<button class='btn btn-primary opacity-75'>Opacity-75</button>
<button class='btn btn-primary opacity-50'>Opacity-50</button>
<button class='btn btn-primary opacity-25'>Opacity-25</button>

Disabled button

<button class='btn' disabled>Button</button>
<button class='btn btn-primary' disabled>Filled</button>
<button class='btn btn-subtle-secondary' disabled>Subtle</button>
<button class='btn btn-outline-danger' disabled>Outlined</button>
<button class='btn btn-text-success' disabled>Text</button>
<button class='btn btn-link' disabled>Link</button>

Link Primary link Link

<a class='btn disabled' role="button" aria-disabled="true">Link</a>
<a class='btn btn-primary disabled' role="button" aria-disabled="true">Primary link</a>
<a class='btn btn-link disabled' role="button" aria-disabled="true">Link</a>

Toggle states

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Button Group

Docs

The Button group component is used to group related buttons together, making actions easier to organize and access.

Basic example

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Active link Link Link

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Mixed styles

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-success">Middle</button>
  <button type="button" class="btn btn-warning">Right</button>
</div>

Outlined styles

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Checkbox and radio button groups

Checkbox 1 Checkbox 2 Checkbox 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked/>
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off"/>
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off"/>
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Radio 1 Radio 2 Radio 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked/>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"/>
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off"/>
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Button toolbar

<div class="btn-toolbar gap-2" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

<div class="btn-toolbar gap-2" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-neutral">1</button>
    <button type="button" class="btn btn-outline-neutral">2</button>
    <button type="button" class="btn btn-outline-neutral">3</button>
    <button type="button" class="btn btn-outline-neutral">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">$</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
  </div>
</div>

<div class="btn-toolbar justify-between gap-2" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-neutral">1</button>
    <button type="button" class="btn btn-outline-neutral">2</button>
    <button type="button" class="btn btn-outline-neutral">3</button>
    <button type="button" class="btn btn-outline-neutral">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">$</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2"/>
  </div>
</div>

Sizing

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Nesting

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M7 9a1 1 0 0 0-.707 1.707l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 17 9z" clip-rule="evenodd"/></svg>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertical variation

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
</div>

Radio 1 Radio 2 Radio 3

<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked/>
  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off"/>
  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off"/>
  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>

Badges

Docs

Badges are small indicators used to display counts, statuses, or labels. They add quick context to elements like buttons, icons, or lists.

Basic badges

Neutral Neutral Neutral

<span class="badge badge-neutral">Neutral</span>
<span class="badge badge-subtle-neutral">Neutral</span>
<span class="badge badge-outline-neutral">Neutral</span>

Notification badge

<button class="btn btn-circle btn-subtle-neutral relative">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 19v-9a6 6 0 0 1 6-6v0a6 6 0 0 1 6 6v9M6 19h12M6 19H4m14 0h2m-9 3h2"/><circle cx="12" cy="3" r="1"/></g></svg>
  <span class="absolute badge badge-danger top-0 right-0 translate-middle p-1 border border-white"></span>
</button>

<button type="button" class="btn btn-primary relative">Profile
  <span class="absolute badge badge-danger -top-2 -right-2 translate-middle p-2 border border-white">
  </span>
</button>

Headings

Example heading New

<h3>Example heading <span class="badge badge-primary">New</span></h3>

variants

Primary Secondary Info

<div class='flex gap-2'>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-info">Info</span>
</div>
<div class='flex gap-2'>
  <span class="badge badge-subtle-primary">Primary</span>
  <span class="badge badge-subtle-secondary">Secondary</span>
  <span class="badge badge-subtle-info">Info</span>
</div>
<div class='flex gap-2'>
  <span class="badge badge-outline-primary">Primary</span>
  <span class="badge badge-outline-secondary">Secondary</span>
  <span class="badge badge-outline-info">Info</span>
</div>

Sizes

Primary Primary Primary

<div class='flex items-center gap-2'>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-primary badge-md">Primary</span>
  <span class="badge badge-primary badge-lg">Primary</span>
</div>
<div class='flex items-center gap-2'>
  <span class="badge badge-subtle-primary">Primary</span>
  <span class="badge badge-subtle-primary badge-md">Primary</span>
  <span class="badge badge-subtle-primary badge-lg">Primary</span>
</div>
<div class='flex items-center gap-2'>
  <span class="badge badge-outline-primary">Primary</span>
  <span class="badge badge-outline-primary badge-md">Primary</span>
  <span class="badge badge-outline-primary badge-lg">Primary</span>
</div>

Badge with icon

With Icon

<div class="badge badge-primary badge-md">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855"/></g></svg>
  With Icon
</div>
<div class="badge badge-subtle-primary badge-md">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855"/></g></svg>
  With Icon
</div>
<div class="badge badge-outline-primary badge-md">
  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/><path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855"/></g></svg>
  With Icon
</div>

Clickable link

Clickable Clickable Clickable

<a href='#' class="badge badge-primary badge-link">Clickable</a>
<a href='#' class="badge badge-subtle-primary badge-link">Clickable</a>
<a href='#' class="badge badge-outline-primary badge-link">Clickable</a>

Deletable

<div class="badge badge-primary">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</div>
<div class="badge badge-subtle-primary">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</div>
<div class="badge badge-outline-primary">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</div>

Clickable & deletable

Deletable Deletable Deletable

<a href="#" class="badge badge-primary badge-link">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</a>
<a href="#" class="badge badge-subtle-primary badge-link">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</a>
<a href="#" class="badge badge-outline-primary badge-link">
  Deletable
  <button class="badge-action-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12s4.925 11 11 11M8.818 7.403L12 10.586l3.182-3.182l1.414 1.414L13.414 12l3.182 3.182l-1.415 1.414L12 13.414l-3.182 3.182l-1.415-1.414L10.586 12L7.403 8.818z"/></svg>
  </button>
</a>

Avatars

Docs

Avatars are small, circular, square images or icons used to represent users or entities. They are commonly seen in tables, lists, and dialog menus.

Image avatar

<div class="avatar">
  <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" />
</div>

Letter avatar

<div class="avatar">
  <div class="avatar-name rounded-full">A</div>
</div>
<div class="avatar">
  <div class="avatar-name bg-primary rounded-full">B</div>
</div>
<div class="avatar">
  <div class="avatar-name bg-secondary rounded-full">C</div>
</div>
<div class="avatar">
  <div class="avatar-name bg-info rounded-full">D</div>
</div>
<div class="avatar">
  <div class="avatar-name bg-warning rounded-full">E</div>
</div>

Icon avatar

<div class="avatar">
  <div class="avatar-name bg-warning rounded-full">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M8 13h8v-2H8zm0 3h8v-2H8zm0 3h5v-2H8zm-2 3q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13h5l-5-5z"/></svg>
  </div>
</div>
<div class="avatar">
  <div class="avatar-name bg-info rounded-full">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5.85 17.1q1.275-.975 2.85-1.537T12 15t3.3.563t2.85 1.537q.875-1.025 1.363-2.325T20 12q0-3.325-2.337-5.663T12 4T6.337 6.338T4 12q0 1.475.488 2.775T5.85 17.1M12 13q-1.475 0-2.488-1.012T8.5 9.5t1.013-2.488T12 6t2.488 1.013T15.5 9.5t-1.012 2.488T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
  </div>
</div>
<div class="avatar">
  <div class="avatar-name bg-success rounded-full">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6q-1.25 0-2.125-.875T16 3t.875-2.125T19 0t2.125.875T22 3t-.875 2.125T19 6M6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h9.1q.4 0 .663.3T14 3q0 1.125.488 2.125T15.85 6.85q.65.525 1.463.838T19 8q.45 0 .9-.075t.875-.25t.825.05t.4.65V16q0 .825-.588 1.413T20 18z"/></svg>
  </div>
</div>

Sizes

<div class="avatar avatar-xs">
  <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" />
</div>
<div class="avatar avatar-sm">
  <img src="/images/avatar/avatar_2.webp" alt="Avatar" class="rounded-full" />
</div>
<div class="avatar">
  <img src="/images/avatar/avatar_3.webp" alt="Avatar" class="rounded-full" />
</div>
<div class="avatar avatar-lg">
  <img src="/images/avatar/avatar_4.webp" alt="Avatar" class="rounded-full" />
</div>

Avatar shape

<div class="flex gap-2">
  <div class="avatar">
    <img src="/images/avatar/avatar_1.webp" alt="Avatar" class='rounded-full' />
  </div>
  <div class="avatar">
    <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded" />
  </div>
  <div class="avatar">
    <img src="/images/avatar/avatar_1.webp" alt="Avatar" />
  </div>
</div>
<div class="flex gap-2">
  <div class="avatar">
    <div class='avatar-name rounded-full'><span>A</span></div>
  </div>
  <div class="avatar">
    <div class='avatar-name rounded bg-primary'><span>B</span></div>
  </div>
  <div class="avatar">
    <div class='avatar-name bg-secondary'><span>C</span></div>
  </div>
</div>

Avatar group

+99

<div class="avatar-group">
  <div class="avatar">
    <img src="/images/avatar/avatar_1.webp" alt="Avatar" />
  </div>
  <div class="avatar">
    <img src="/images/avatar/avatar_2.webp" alt="Avatar" />
  </div>
  <div class="avatar">
    <img src="/images/avatar/avatar_3.webp" alt="Avatar" />
  </div>
  <div class="avatar">
    <img src="/images/avatar/avatar_4.webp" alt="Avatar" />
  </div>
  <div class="avatar">
    <div class="avatar-name bg-primary text-base">
      <span>+99</span>
    </div>
  </div>
</div>

Status

<div class="avatar avatar-status-online">
  <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" />
</div>
<div class="avatar avatar-status-offline">
  <img src="/images/avatar/avatar_3.webp" alt="Avatar" class="rounded-full" />
</div>
<div class="avatar avatar-status-away">
  <img src="/images/avatar/avatar_4.webp" alt="Avatar" class="rounded-full" />
</div>
<div class="avatar avatar-status-busy">
  <img src="/images/avatar/avatar_2.webp" alt="Avatar" class="rounded-full" />
</div>

Avatar text

Andrew Alfred

Technical advisor

<div class="flex items-center gap-3">
  <div class="avatar avatar-lg">
    <img src="/images/avatar/avatar_3.webp" alt="Avatar" class="rounded-full" />
  </div>
  <div>
    <p class="mb-0 font-semibold">Andrew Alfred</p>
    <span class="text-muted">Technical advisor</span>
  </div>
</div>

Gradient border

<div class="avatar avatar-lg bg-linear-to-r from-cyan-400 to-blue-500 p-0.5 rounded-full">
  <img src="/images/avatar/avatar_2.webp" alt="Avatar" class="bg-default p-0.5 rounded-full" />
</div>
<div class="avatar avatar-lg bg-linear-to-r from-purple-400 to-amber-500 p-0.5 rounded-full">
  <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="bg-default p-0.5 rounded-full" />
</div>
<div class="avatar avatar-lg bg-linear-to-r from-cyan-400 to-sky-500 p-0.5 rounded-full">
  <img src="/images/avatar/avatar_11.webp" alt="Avatar" class="bg-default p-0.5 rounded-full" />
</div>
<div class="avatar avatar-lg bg-linear-to-r from-green-400 to-blue-500 p-0.5 rounded-full">
  <img src="/images/avatar/avatar_3.webp" alt="Avatar" class="bg-default p-0.5 rounded-full" />
</div>
<div class="avatar avatar-lg bg-linear-to-r from-orange-400 to-rose-500 p-0.5 rounded-full">
  <img src="/images/avatar/avatar_16.webp" alt="Avatar" class="bg-default p-0.5 rounded-full" />
</div>

Inline avatar

I spent most of the day exploring bottle returns in Michigan. Alfred insists it won’t work, but I still think there’s a way to make it profitable.

<p>
  I spent most of the day exploring bottle returns in Michigan. 
  <span class="inline-flex items-baseline gap-1">
    <span class="avatar avatar-xs self-center">
      <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" />
    </span>
    <span class="font-medium">Alfred</span>
  </span>
  insists it won’t work, but I still think there’s a way to make it profitable.
</p>

Link

Docs

Link utilities enable styling of anchor elements with options for color, opacity, underline offset, underline color, and more.

Example

Click me

<a href="#" class="link">Click me</a>

Colors

Primary Secondary Info Success Warning Danger Neutral

<a href="#" class="link link-primary">Primary</a>
<a href="#" class="link link-secondary">Secondary</a>
<a href="#" class="link link-info">Info</a>
<a href="#" class="link link-success">Success</a>
<a href="#" class="link link-warning">Warning</a>
<a href="#" class="link link-danger">Danger</a>
<a href="#" class="link link-neutral">Neutral</a>

Link hover

Default Primary Secondary Info Success Warning Danger Neutral

<a href="#" class="link link-hover">Default</a>
<a href="#" class="link link-hover link-primary">Primary</a>
<a href="#" class="link link-hover link-secondary">Secondary</a>
<a href="#" class="link link-hover link-info">Info</a>
<a href="#" class="link link-hover link-success">Success</a>
<a href="#" class="link link-hover link-warning">Warning</a>
<a href="#" class="link link-hover link-danger">Danger</a>
<a href="#" class="link link-hover link-neutral">Neutral</a>

Close Button

Docs

A simple, reusable close button for dismissing elements such as modals, toasts, drawers, and alerts.

Example

<button class="btn-close" aria-label="close"></button>
<button class="btn-close btn-close-circle" aria-label="close"></button>

Disable state

<button class="btn-close" aria-label="close" disabled></button>

White variant

<button class="btn-close btn-close-white" aria-label="close"></button>

Divider

Docs

A versatile component used to separate content with horizontal or vertical lines, helping organize sections and improve visual hierarchy in layouts.

Divider horizontal

<hr>
<hr class="border-primary"/>
<hr class="border-t-2 border-danger"/>
<hr class="border-t-4 border-success"/>

Divider vertical

<div class="vr"></div>
<div class="vr border-secondary h-10"></div>
<div class="vr border-s-2 border-warning h-20"></div>
<div class="vr border-s-4 border-info h-30"></div>

Divider horizontal with label

START

CENTER

END

<div class="hr-label label-start">START</div>
<div class="hr-label">CENTER</div>
<div class="hr-label label-end">END</div>

Divider vertical with label

START

CENTER

END

<div class="vr-label label-start">START</div>
<div class="vr-label">CENTER</div>
<div class="vr-label label-end">END</div>

Colors and sizes

START

CENTER

END

<div class="hr-label label-start after:border-primary after:border-t-2">START</div>
<div class="hr-label before:border-success before:border-t-4 after:border-success after:border-t-4">CENTER</div>
<div class="hr-label label-end before:border-warning before:border-t-6">END</div>

START

CENTER

END

<div class="vr-label label-start after:border-primary after:border-s-2">START</div>
<div class="vr-label before:border-success before:border-s-4 after:border-success after:border-s-4">CENTER</div>
<div class="vr-label label-end before:border-warning before:border-s-6">END</div>

Loaders

Docs

A visual indicator to show loading states. Supports spinners, bars, and pulsing effects, fully customizable with Tailwind utility classes.

Border spinner

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-neutral" role="status">
  <span class="sr-only">Loading...</span>
</div>

Growing spinner

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-neutral" role="status">
  <span class="sr-only">Loading...</span>
</div>

Size

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border size-12" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow size-12" role="status">
  <span class="sr-only">Loading...</span>
</div>

Buttons

<button class="btn btn-square btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-square btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Bar Loader

<div class="loader-bar"></div>

<div class="loader-bar"></div>
<div class="loader-bar loader-bar-secondary"></div>
<div class="loader-bar loader-bar-warning"></div>
<div class="loader-bar loader-bar-danger"></div>
<div class="loader-bar loader-bar-info"></div>
<div class="loader-bar loader-bar-success"></div>

Placeholder

Docs

Shows a visual loading state with animated shapes resembling the final content layout, providing a smooth transition while real data is being loaded.

Glow Animation Example

<div class="placeholder-glow flex flex-col gap-2 w-full max-w-70">
  <span class="placeholder w-full"></span>
  <span class="placeholder size-14 rounded-full"></span>
  <span class="placeholder w-full h-14"></span>
  <span class="placeholder w-full h-14"></span>
</div>

Wave Animation Example

Black-throated Mango male

November 10, 2021

The male Black-throated Mango hummingbird has a metallic bronze-green upper body and flanks, a black throat and chest, and white underparts

<div class="placeholder-wave card w-full max-w-88">
  <div class="card-header flex items-center border-0">
    <div class="me-4">
      <span class="placeholder size-13 rounded-full"></span>
    </div>
    <div class="flex-1">
      <span class="placeholder w-full"></span>
      <span class="placeholder w-full"></span>
    </div>
  </div>
  <div class="placeholder h-58"></div>
  <div class="card-body">
    <span class="placeholder w-full"></span>
    <span class="placeholder w-3/4"></span>
  </div>
</div>

<div class="card max-w-88">
  <div class="card-header flex items-center border-0">
    <div class="avatar avatar-lg me-4">
      <img src="/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full"/>
    </div>
    <div>
      <p class="text-default mb-0">Black-throated Mango male</p>
      <p class="mb-0">November 10, 2021</p>
    </div>
    <button class='btn btn-icon ms-auto self-start -mr-2'>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path fill="currentColor" d="M8 5a1 1 0 1 1 0-2a1 1 0 0 1 0 2m0 4a1 1 0 1 1 0-2a1 1 0 0 1 0 2m-1 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0" stroke-width="0.5" stroke="currentColor"/></svg>
    </button>
  </div>
  <img src="/images/2.avif" alt="Hummingbird" class='card-img' />
  <div class="card-body">
    <p class="text-sm mb-0">The male Black-throated Mango hummingbird has a metallic bronze-green upper body and flanks, a black throat and chest, and white underparts</p>
  </div>
</div>

Width

<span class="placeholder col-6"></span>
<span class="placeholder w-3/4"></span>
<span class="placeholder w-50"></span>

Color

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-neutral"></span>

Sizing

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Inferring Dimensions

h1

h3

paragraph

h1

h3

paragraph

<div class="flex-3 flex flex-col gap-3">
  <h1 class="placeholder">h1</h1>
  <h3 class="placeholder">h3</h3>
  <p class="placeholder">paragraph</p>
</div>
<div class="flex-2 flex flex-col gap-3">
  <h1>h1</h1>
  <h3>h3</h3>
  <p>paragraph</p>
</div>

Progress

Docs

A versatile progress component with linear and circular styles, supporting colors, labels, stacked bars, stripes, and animations.

Basic Progress

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-1/4"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-1/2"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-3/4"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-full"></div>
</div>

Backgrounds

<div class="progress" role="progressbar" aria-label="Background example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-primary w-1/5"></div>
</div>
<div class="progress" role="progressbar" aria-label="Background example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-secondary w-3/10"></div>
</div>
<div class="progress" role="progressbar" aria-label="Background example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning w-2/5"></div>
</div>
<div class="progress" role="progressbar" aria-label="Background example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger w-1/2"></div>
</div>
<div class="progress" role="progressbar" aria-label="Background example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info w-3/5"></div>
</div>
<div class="progress" role="progressbar" aria-label="Background example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success w-7/10"></div>
</div>

Height

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-2/5"></div>
</div>
<div class="progress h-2" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-2/5"></div>
</div>
<div class="progress h-3" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-2/5"></div>
</div>

Labels

25%

50%

75%

<div class="progress h-3" role="progressbar" aria-label="Height example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-1/4">25%</div>
</div>
<div class="progress h-3" role="progressbar" aria-label="Height example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger w-1/2">50%</div>
</div>
<div class="progress h-3" role="progressbar" aria-label="Height example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success w-3/4">75%</div>
</div>

Multiple bars

<div class="progress-stacked gap-0.5 h-3">
  <div class="progress w-1/5" role="progressbar" aria-label="Segment one" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar"></div>
  </div>
  <div class="progress w-3/20" role="progressbar" aria-label="Segment two" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-secondary"></div>
  </div>
  <div class="progress w-1/20" role="progressbar" aria-label="Segment three" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger"></div>
  </div>
  <div class="progress w-1/4" role="progressbar" aria-label="Segment four" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info"></div>
  </div>
  <div class="progress w-1/5" role="progressbar" aria-label="Segment five" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success"></div>
  </div>
</div>

Striped

<div class="progress h-3">
  <div class="progress-bar progress-bar-striped w-1/5"></div>
</div>
<div class="progress h-3">
  <div class="progress-bar progress-bar-striped bg-secondary w-3/10"></div>
</div>
<div class="progress h-3">
  <div class="progress-bar progress-bar-striped bg-danger w-2/5"></div>
</div>
<div class="progress h-3">
  <div class="progress-bar progress-bar-striped bg-warning w-3/5"></div>
</div>
<div class="progress h-3">
  <div class="progress-bar progress-bar-striped bg-success w-4/5"></div>
</div>

Animated stripes

<div class="progress h-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated w-3/5"></div>
</div>

Circular Progress

<div class="size-40">
  <svg class="size-full" viewBox="0 0 100 100">
    <circle
      class="stroke-current text-(--background-color-muted)"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
    ></circle>

    <circle
      class="stroke-current text-primary -rotate-90 origin-[50%_50%]"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
      stroke-linecap="round"
      stroke-dasharray="251.2"
      stroke-dashoffset="calc(251.2px - (251.2px * 35) / 100)"
    ></circle>
  </svg>
</div>

Circular Label

25%

50%

75%

<!-- progress lable 25% -->
<div class="relative size-40">
  <svg class="size-full" viewBox="0 0 100 100">
    <circle
      class="stroke-current text-(--background-color-muted)"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
    ></circle>

    <circle
      class="stroke-current text-danger -rotate-90 origin-[50%_50%]"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
      stroke-linecap="round"
      stroke-dasharray="251.2"
      stroke-dashoffset="calc(251.2px - (251.2px * 25) / 100)"
    ></circle>
  </svg>

  <div class="absolute top-1/2 left-1/2 transform -translate-1/2">
    <span class="text-center text-2xl">25%</span>
  </div>
</div>

<!-- progress lable 50% -->
<div class="relative size-40">
  <svg class="size-full" viewBox="0 0 100 100">
    <circle
      class="stroke-current text-(--background-color-muted)"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
    ></circle>

    <circle
      class="stroke-current text-info -rotate-90 origin-[50%_50%]"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
      stroke-linecap="round"
      stroke-dasharray="251.2"
      stroke-dashoffset="calc(251.2px - (251.2px * 50) / 100)"
    ></circle>
  </svg>

  <div class="absolute top-1/2 left-1/2 transform -translate-1/2">
    <span class="text-center text-2xl">50%</span>
  </div>
</div>

<!-- progress lable 75% -->
<div class="relative size-40">
  <svg class="size-full" viewBox="0 0 100 100">
    <circle
      class="stroke-current text-(--background-color-muted)"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
    ></circle>

    <circle
      class="stroke-current text-success -rotate-90 origin-[50%_50%]"
      stroke-width="8"
      cx="50"
      cy="50"
      r="40"
      fill="none"
      stroke-linecap="round"
      stroke-dasharray="251.2"
      stroke-dashoffset="calc(251.2px - (251.2px * 75) / 100)"
    ></circle>
  </svg>

  <div class="absolute top-1/2 left-1/2 transform -translate-1/2">
    <span class="text-center text-2xl">75%</span>
  </div>
</div>

Previous Typography Next Navigation

Getting started

Foundations

Components

Basic

Button

Base button

Filled button

Subtle button

Outlined button

Text button

Button sizes

Button shape

Buttons with icons and label

Icon button

Sizes

Block button

Gradient button

Colored shadows

Opacities

Disabled button

Toggle states

Button Group

Basic example

Mixed styles

Outlined styles

Checkbox and radio button groups

Button toolbar

Sizing

Nesting

Vertical variation

Badges

Basic badges

Notification badge

Headings

Example heading New

variants

Sizes

Badge with icon

Clickable link

Deletable

Clickable & deletable

Avatars

Image avatar

Letter avatar

Icon avatar

Sizes

Avatar shape

Avatar group

Status

Avatar text

Gradient border

Inline avatar

Link

Example

Colors

Link hover

Close Button

Example

Disable state

White variant

Divider

Divider horizontal

Divider vertical

Divider horizontal with label

Divider vertical with label

Colors and sizes

Loaders

Border spinner

Growing spinner

Size

Buttons

Bar Loader

Placeholder

Glow Animation Example

Wave Animation Example

Width

Color

Sizing

Inferring Dimensions

h1