tabler/preview/pages/badges.astro

---
import BadgeList from '@ui/BadgeList.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import DropdownMenu from '@components/demo/DropdownMenu.astro'
import site from '@data/site.json'
import { ucFirst } from '@shared/lib/string-format'
import DocsLink from '@ui/DocsLink.astro'

const colors = [...Object.keys(site.colors), 'dark', 'light']
const sizes = ['sm', 'md', 'lg']
---

<DefaultLayout title="Badges" pageMenu="base.badges" description="Badges highlight a count, status, or short label attached to text, buttons, or menu items.">
  <DocsLink slot="page-header-actions" path="/ui/components/badge" />

  <div class="row row-cards mb-5">
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>In headings</CardTitle>
          <CardSubtitle>A badge scales with the heading level it sits next to.</CardSubtitle>
          <div class="h1">Example heading <span class="badge">New</span></div>
          <div class="h2">Example heading <span class="badge">New</span></div>
          <div class="h3">Example heading <span class="badge">New</span></div>
          <div class="h4">Example heading <span class="badge">New</span></div>
          <div class="h5">Example heading <span class="badge">New</span></div>
          <div class="h6">Example heading <span class="badge">New</span></div>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Sizes</CardTitle>
          <CardSubtitle>Three sizes, with an optional icon before or after the label.</CardSubtitle>
          <div class="space-y">
            {
              sizes.map((size) => (
                <BadgeList>
                  <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span>
                  <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
                    <Icon name="check" /> Left icon
                  </span>
                  <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
                    Right icon
                    <Icon name="arrow-right" />
                  </span>
                  <span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}>
                    <Icon name="star" filled />
                  </span>
                </BadgeList>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Positioned</CardTitle>
          <CardSubtitle>Attach a count or a dot to a button with <code>.badge-notification</code>.</CardSubtitle>
          <ButtonList>
            <button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>

            <button type="button" class="btn">
              Inbox
              <span class="badge bg-red badge-notification text-red-fg">
                9+
                <span class="visually-hidden">unread messages</span>
              </span>
            </button>

            <button type="button" class="btn">
              Profile
              <span class="badge badge-dot bg-red badge-notification"></span>
            </button>

            <button type="button" class="btn">
              Settings
              <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
            </button>

            <button type="button" class="btn btn-icon">
              <Icon name="bell" />
              <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
            </button>

            <button type="button" class="btn btn-icon btn-action" aria-label="Notifications">
              <Icon name="bell" />
              <span class="badge badge-dot bg-red badge-notification"></span>
            </button>
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>In a dropdown</CardTitle>
          <CardSubtitle>A badge inside a dropdown item.</CardSubtitle>
          <DropdownMenu show badge arrow />
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>On buttons</CardTitle>
          <CardSubtitle>Pair any badge color with a button label.</CardSubtitle>
          <ButtonList>
            {
              colors.map((color, index) => (
                <button class="btn">
                  {ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg ms-2`}>{index + 1}</span>
                </button>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Notification dot</CardTitle>
          <CardSubtitle>A pill-shaped counter positioned on the corner of a button.</CardSubtitle>
          <ButtonList>
            {
              colors.map((color, index) => (
                <button class="btn position-relative">
                  {ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg badge-notification badge-pill`}>{index + 1}</span>
                </button>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Blinking notification</CardTitle>
          <CardSubtitle>Add <code>.badge-blink</code> to draw attention to unread activity.</CardSubtitle>
          <ButtonList>
            {
              colors.map((color) => (
                <button class="btn position-relative">
                  {ucFirst(color)} badge <span class={`badge bg-${color} badge-notification badge-blink`} />
                </button>
              ))
            }
          </ButtonList>
        </CardBody>
      </Card>
    </div>
  </div>

  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Basic</CardTitle>
          <CardSubtitle>Fill a badge with a theme or extended color.</CardSubtitle>
          <BadgeList>
            {colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)}
          </BadgeList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Light</CardTitle>
          <CardSubtitle>A tinted background for a softer, secondary badge.</CardSubtitle>
          <BadgeList>
            {colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)}
          </BadgeList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Outline</CardTitle>
          <CardSubtitle>A colored border with a transparent background.</CardSubtitle>
          <BadgeList>
            {colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)}
          </BadgeList>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>With icons</CardTitle>
          <CardSubtitle>Add an icon before the label to reinforce its meaning.</CardSubtitle>
          <BadgeList>
            {
              colors.map((color) => (
                <span class={`badge bg-${color} text-${color}-fg`}>
                  {' '}
                  <Icon name="star" filled /> {ucFirst(color)}{' '}
                </span>
              ))
            }
          </BadgeList>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>