Badges

Small count and labeling component.

Solid

PrimarySecondarySecondary altSuccessDangerWarningInfo

Light

Dark

import Badge from 'react-bootstrap/Badge'
import Stack from 'react-bootstrap/Stack'

export default function BadgesSolidDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Badge bg="primary">Primary</Badge>
      <Badge bg="secondary">Secondary</Badge>
      <Badge bg="body-secondary" text="body-emphasis">Secondary alt</Badge>
      <Badge bg="success">Success</Badge>
      <Badge bg="danger">Danger</Badge>
      <Badge bg="warning">Warning</Badge>
      <Badge bg="info">Info</Badge>
      <Badge bg="light" text="dark">Light</Badge>
      <Badge bg="dark">Dark</Badge>
    </Stack>
  )
}

Outline

PrimarySecondarySuccessDangerWarningInfo

Light

Dark

import Badge from 'react-bootstrap/Badge'
import Stack from 'react-bootstrap/Stack'

export default function BadgesOutlineDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Badge bg="transparent" text="primary" className="border border-primary">
        Primary
      </Badge>
      <Badge bg="transparent" text="body-emphasis" className="border">
        Secondary
      </Badge>
      <Badge bg="transparent" text="success" className="border border-success">
        Success
      </Badge>
      <Badge bg="transparent" text="danger" className="border border-danger">
        Danger
      </Badge>
      <Badge bg="transparent" text="warning" className="border border-warning">
        Warning
      </Badge>
      <Badge bg="transparent" text="info" className="border border-info">
        Info
      </Badge>
      <Badge bg="transparent" text="light" className="border border-light">
        Light
      </Badge>
      <Badge bg="transparent" text="dark" className="border border-dark">
        Dark
      </Badge>
    </Stack>
  )
}

Subtle

PrimarySecondarySuccessDangerWarningInfo

Light

Dark

import Badge from 'react-bootstrap/Badge'
import Stack from 'react-bootstrap/Stack'

export default function BadgesSubtleDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      <Badge bg="primary-subtle" text="primary">Primary</Badge>
      <Badge bg="secondary-subtle" text="body-emphasis">Secondary</Badge>
      <Badge bg="success-subtle" text="success">Success</Badge>
      <Badge bg="danger-subtle" text="danger">Danger</Badge>
      <Badge bg="warning-subtle" text="warning">Warning</Badge>
      <Badge bg="info-subtle" text="info">Info</Badge>
      <Badge bg="light" text="light" className="bg-opacity-10">Light</Badge>
      <Badge bg="dark-subtle" text="body-emphasis">Dark</Badge>
    </Stack>
  )
}

Badge with icon

HomeFavorite

import Badge from 'react-bootstrap/Badge'
import Stack from 'react-bootstrap/Stack'

export default function BadgesWithIconDemo() {
  return (
    <Stack direction="horizontal" gap={2}>
      <Badge bg="primary" className="d-inline-flex align-items-center">
        <i className="ci-home fs-sm me-1"/>
        Home
      </Badge>
      <Badge
        bg="transparent"
        text="primary"
        className="d-inline-flex align-items-center border border-primary"
      >
        Favorite
        <i className="ci-heart fs-sm ms-1"/>
      </Badge>
      <Badge bg="primary-subtle" text="primary">
        <i className="ci-trash fs-sm"/>
      </Badge>
    </Stack>
  )
}

Shapes

RoundedPill badgeSquare

import Badge from 'react-bootstrap/Badge'
import Stack from 'react-bootstrap/Stack'

export default function BadgesShapesDemo() {
  return (
    <Stack direction="horizontal" gap={2}>
      <Badge bg="primary">Rounded</Badge>
      <Badge bg="primary" pill>Pill badge</Badge>
      <Badge bg="primary" className="rounded-0">Square</Badge>
    </Stack>
  )
}

Inside heading

Example heading New

import Badge from 'react-bootstrap/Badge'

export default function BadgesHeadingDemo() {
  return (
    <>
      <h1>
        Example heading <Badge bg="secondary">New</Badge>
      </h1>
      <h2>
        Example heading <Badge bg="secondary">New</Badge>
      </h2>
      <h3>
        Example heading <Badge bg="secondary">New</Badge>
      </h3>
      <h4>
        Example heading <Badge bg="secondary">New</Badge>
      </h4>
      <h5>
        Example heading <Badge bg="secondary">New</Badge>
      </h5>
      <h6>
        Example heading <Badge bg="secondary">New</Badge>
      </h6>
    </>
  )
}

Inside button

import Badge from 'react-bootstrap/Badge'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function BadgesButtonDemo() {
  return (
    <Stack direction="horizontal" gap={3} className="flex-wrap">
      <Button>
        Notifications
        <Badge bg="light" text="dark" className="ms-2 me-n1">
          4
        </Badge>
      </Button>
      <Button variant="dark" className="rounded-pill">
        Comments
        <Badge bg="success" pill className="ms-2 me-n1">
          9
        </Badge>
      </Button>
      <Button variant="outline-secondary" className="position-relative">
        Inbox
        <Badge bg="info" pill className="position-absolute top-0 start-100 translate-middle">
          50+
        </Badge>
      </Button>
    </Stack>
  )
}

Inside list group

Messages14 Orders2 Favourites6

import Badge from 'react-bootstrap/Badge'
import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'

export default function BadgesListGroupDemo() {
  return (
    <ListGroup>
      <ListGroupItem action href="#link1" className="d-flex justify-content-between align-items-center">
        Messages
        <Badge bg="success">14</Badge>
      </ListGroupItem>
      <ListGroupItem action href="#link2" className="d-flex justify-content-between align-items-center">
        Orders
        <Badge bg="warning">2</Badge>
      </ListGroupItem>
      <ListGroupItem action href="#link3" className="d-flex justify-content-between align-items-center">
        Favourites
        <Badge bg="danger">6</Badge>
      </ListGroupItem>
    </ListGroup>
  )
}