Badges

Documentation and examples for badges, bootstrap`s small count and labeling component.

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Danger Warning Info Light Dark

  <x-badge type="primary" text="Primary"/>
  <x-badge type="secondary" text="Secondary"/>
  <x-badge type="danger" text="Danger"/>
  <x-badge class="text-dark" type="warning" text="Warning"/>
  <x-badge class="text-dark" type="info" text="Info"/>
  <x-badge class="text-dark" type="light" text="Light"/>
  <x-badge type="dark" text="Dark"/>

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Primary Secondary Success Danger Warning Info Light Dark

Show code

  @php
    $withLinks = [[
        'type' => 'primary',
        'link' => [
          'href' => '#',
          'text' => 'Primary',
        ],
      ],[
        'type' => 'secondary',
        'link' => [
          'href' => '#',
          'text' => 'Secondary',
        ],
      ],[
        'type' => 'success',
        'link' => [
          'href' => '#',
          'text' => 'Success',
        ],
      ],[
        'type' => 'danger',
        'link' => [
          'href' => '#',
          'text' => 'Danger',
        ],
      ],[
        'class' => 'text-dark',
        'type' => 'warning',
        'link' => [
          'href' => '#',
          'text' => 'Warning',
        ],
      ],[
        'class' => 'text-dark',
        'type' => 'info',
        'link' => [
          'href' => '#',
          'text' => 'Info',
        ],
      ],[
        'class' => 'text-dark',
        'type' => 'light',
        'link' => [
          'href' => '#',
          'text' => 'Light',
        ],
      ],[
        'type' => 'dark',
        'link' => [
        'href' => '#',
        'text' => 'Dark',
      ],
    ]]
  @endphp

  @foreach ($withLinks as $badge)
    <x-badge :all="$badge" variant="pill" />
  @endforeach

Badges as links

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Primary Secondary Success Danger Warning Info Light Dark

Show code

  @php
    $withLinks = [[
        'type' => 'primary',
        'link' => [
          'href' => '#',
          'text' => 'Primary',
        ],
      ],[
        'type' => 'secondary',
        'link' => [
          'href' => '#',
          'text' => 'Secondary',
        ],
      ],[
        'type' => 'success',
        'link' => [
          'href' => '#',
          'text' => 'Success',
        ],
      ],[
        'type' => 'danger',
        'link' => [
          'href' => '#',
          'text' => 'Danger',
        ],
      ],[
        'class' => 'text-dark',
        'type' => 'warning',
        'link' => [
          'href' => '#',
          'text' => 'Warning',
        ],
      ],[
        'class' => 'text-dark',
        'type' => 'info',
        'link' => [
          'href' => '#',
          'text' => 'Info',
        ],
      ],[
        'class' => 'text-dark',
        'type' => 'light',
        'link' => [
          'href' => '#',
          'text' => 'Light',
        ],
      ],[
        'type' => 'dark',
        'link' => [
        'href' => '#',
        'text' => 'Dark',
      ],
    ]]
  @endphp

  @foreach ($withLinks as $badge)
    <x-badge :all="$badge" />
  @endforeach

Blade-Component informations

Path

lbc/components/badge.blade.php

Name	Type	Description
all	array	Submit all data.
class	string	Classes can be added, all other attributes can also be set.
type	string	Badge class/type `primary, secondary, success, danger, warning, info, light, dark`.
link	array	Badge width a-tag.
text	string	Badge content and html is disallowed.

For more information about badge read the bootstrap documention Badge

Components

EXAMPLES Example templates from Bootstrap Dokumention.