Badge

Documentation and examples for badges, the small count and labeling component.

How it works

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. You can set content via slot or prop title. Set style via prop color and position them using prop top="0|50|100", bottom="0|50|100", start="0|50|100" and end="0|50|100".

Basic example

Find below a basic example.

Default Pill 1

<x-badge title="Default" />
<x-badge pill>Pill</x-badge>
<x-badge circle>1</x-badge>

<span class="badge bg-primary">Default</span> <span class="badge bg-primary rounded-pill">Pill</span> <span class="badge bg-primary rounded-circle">1</span>

Colored example

Use the border spinners for a lightweight loading indicator.

primary secondary success danger warning info light dark

<x-badge color="primary">primary</x-badge>
<x-badge color="secondary">secondary</x-badge>
<x-badge color="success">success</x-badge>
<x-badge color="danger">danger</x-badge>
<x-badge color="warning">warning</x-badge>
<x-badge color="info">info</x-badge>
<x-badge color="light">light</x-badge>
<x-badge color="dark">dark</x-badge>

<span class="badge bg-primary">primary</span> <span class="badge bg-secondary">secondary</span> <span class="badge bg-success">success</span> <span class="badge bg-danger">danger</span> <span class="badge bg-warning">warning</span> <span class="badge bg-info">info</span> <span class="badge bg-light">light</span> <span class="badge bg-dark">dark</span>

Positioned example

Badge component use position utilities to position it in the corner of a link or button. Use the prop top="0|50|100", bottom="0|50|100", start="0|50|100" and end="0|50|100". You can also add more class with a few more utilities without a count for a more generic indicator.

<x-button color="primary" class="m-4 position-relative">
  Top right pill
  <x-badge top="0" start="100" color="danger" pill>
    99+<span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Top left circle
  <x-badge top="0" start="0" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Top center circle
  <x-badge top="0" start="50" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Top right circle
  <x-badge top="0" start="100" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Center right circle
  <x-badge top="50" start="100" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Bottom right circle
  <x-badge top="100" start="100" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Bottom center circle
  <x-badge top="100" start="50" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Bottom right circle
  <x-badge top="100" start="0" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<x-button color="primary" class="m-4 position-relative">
  Center right circle
  <x-badge top="50" start="0" color="danger" class="border border-light p-2" circle>
    <span class="visually-hidden">unread messages</span>
  </x-badge>
</x-button>

<button type="button"
      class="btn btn-primary m-4 position-relative">Top right pill <span class="badge bg-danger position-absolute translate-middle top-0 start-100 rounded-pill">99+<span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Top left circle <span class="badge bg-danger position-absolute translate-middle top-0 start-0 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Top center circle <span class="badge bg-danger position-absolute translate-middle top-0 start-50 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Top right circle <span class="badge bg-danger position-absolute translate-middle top-0 start-100 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Center right circle <span class="badge bg-danger position-absolute translate-middle top-50 start-100 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Bottom right circle <span class="badge bg-danger position-absolute translate-middle top-100 start-100 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Bottom center circle <span class="badge bg-danger position-absolute translate-middle top-100 start-50 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Bottom right circle <span class="badge bg-danger position-absolute translate-middle top-100 start-0 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button> <button type="button"
      class="btn btn-primary m-4 position-relative">Center right circle <span class="badge bg-danger position-absolute translate-middle top-50 start-0 rounded-circle border border-light p-2"><span class="visually-hidden">unread messages</span></span></button>