<Card>
  <Card.Header>
    <h5>Basic Alerts</h5>
  </Card.Header>
  <Card.Body>
      <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Badge bg="primary">Primary</Badge>
  <Badge bg="secondary">Secondary</Badge>
  <Badge bg="success">Success</Badge>
  <Badge bg="danger">Danger</Badge>
  <Badge bg="warning" text="dark">Warning</Badge>
  <Badge bg="info">Info</Badge>
  <Badge bg="light" text="dark">Light</Badge>
  <Badge bg="dark">Dark</Badge>
    </Stack>
  </Card.Body>
</Card>

<Card>
  <Card.Header>
    <h5>Outline Badges</h5>
  </Card.Header>
  <Card.Body>
      <Stack direction="horizontal" gap={2} className="flex-wrap">
      <span className="text-outline-primary">Primary</span>
  <span className="text-outline-secondary">Secondary</span>
  <span className="text-outline-success">Success</span>
  <span className="text-outline-danger">Danger</span>
  <span className="text-outline-warning">Warning</span>
  <span className="text-outline-info">Info</span>
  <span className="text-outline-dark">Dark</span>
    </Stack>
  </Card.Body>
</Card>

<Card>
  <Card.Header>
    <h5>Light Badges</h5>
  </Card.Header>
  <Card.Body>
      <Stack direction="horizontal" gap={2} className=""flex-wrap>
      <span className="badge text-light-primary"><DownloadSimple size={12} /> Primary</span>
  <span className="badge text-light-secondary">Secondary</span>
  <span className="badge text-light-success">Success</span>
  <span className="badge text-light-danger">Danger</span>
  <span className="badge text-light-warning">Warning</span>
  <span className="badge text-light-info">Info</span>
  <span className="badge text-light-dark">Dark</span>
    </Stack>;
  </Card.Body>
</Card>

<Card>
  <Card.Header>
    <h5>Radius option on Badges</h5>
  </Card.Header>
  <Card.Body>
      <Stack direction="horizontal" gap={2} className="flex-wrap">
               <Badge bg="primary" className="b-r-0">Primary</Badge>
      <Badge bg="secondary" className="b-r-6">Secondary</Badge>
      <Badge bg="success" className="b-r-8">Success</Badge>
      <Badge bg="danger" className="b-r-10">Danger</Badge>
    </Stack>;
  </Card.Body>
</Card>

<Card>
  <Card.Header>
    <h5>Badges positions</h5>
  </Card.Header>
  <Card.Body>
      <Stack direction="horizontal" gap={2} className="flex-wrap">
<Button variant="outline-danger" className="position-relative">
        Offline
        <span className="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle">
          <span className="visually-hidden">Offline</span>
        </span>
      </Button>
<Button variant="outline-warning" className="position-relative">
        Busy
        <span className="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle">
          <span className="visually-hidden">Busy</span>
        </span>
      </Button>
<Button variant="outline-success" className="position-relative">
        Online
        <span className="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle">
          <span className="visually-hidden">Online</span>
        </span>
      </Button>
<Button variant="outline-secondary" className="position-relative">
        Disable
        <span className="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle">
          <span className="visually-hidden">Disable</span>
        </span>
      </Button>
    </Stack>
  </Card.Body>
</Card>

<Card>
  <Card.Header>
    <h5>Icon's badges</h5>
  </Card.Header>
  <Card.Body>
      <Stack direction="horizontal" gap={2} className="flex-wrap">
          <a href="#" className="position-relative bg-light-primary p-2 rounded">
    <ShoppingCart size={22} />
    <span className="position-absolute top-0 start-100 translate-middle p-1 bg-primary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast" />
  </a>
  <a href="#" className="position-relative bg-light-secondary p-2 rounded">
    <DotsThreeOutline size={22} />
    <span className="position-absolute top-0 start-100 translate-middle p-1 bg-secondary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast" />
  </a>
  <a href="#" className="position-relative bg-light-success p-2 rounded">
    <MegaphoneSimple size={22} />
    <span className="position-absolute top-0 start-100 translate-middle p-1 bg-success rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast" />
  </a>
  <a href="#" className="position-relative bg-light-danger p-2 rounded">
    <EnvelopeSimple size={22} />
    <span className="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast" />
  </a>
  <a href="#" className="position-relative bg-light-dark p-2 rounded">
    <Moon size={22} weight="fill" />
    <span className="position-absolute top-0 start-100 translate-middle p-1 bg-dark rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast" />
  </a>
    </Stack>
  </Card.Body>
</Card>