Badge

Small label for counts, status, or tags.

Introduction

Badges are compact labels for counts, status indicators, or categorical tags. They draw attention to short, scannable information without occupying much space.

When to use: Highlight notification counts, label items with a status (“Draft”, “Beta”), or tag categories in lists and tables.

Compared to similar components:

Avatar — Shows identity through a photo, initials, or icon. Badges communicate metadata about an item, not the entity itself.
Alert — Full-width feedback banners with title and body text. Use Alert for detailed messages the user should read; use Badge for terse labels that supplement existing UI.
Bridge Badge is a standalone label, not an overlay anchored to another element. To indicate unread counts on a button, place the Badge beside or inside the button and include the count in the button’s accessible name.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Badge } from "@bridge-ui/vue/Components/Badge";

import { Badge } from "@bridge-ui/react/Components/Badge";

Basic usage

Badges wrap short text or numbers. Use density="mini" for compact numeric badges such as notification counts.

<script setup lang="ts">
import { Badge } from "@bridge-ui/vue/Components/Badge";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Badge>New</Badge>

    <Badge density="mini">3</Badge>

    <Badge variant="flat" color="success">Active</Badge>
  </div>
</template>

import { Badge } from "@bridge-ui/react/Components/Badge";

export default function BadgeBasic() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>New</Badge>

      <Badge density="mini">3</Badge>

      <Badge variant="flat" color="success">
        Active
      </Badge>
    </div>
  );
}

Colors

Use the color prop to convey semantic meaning. Available colors: primary, secondary, success, info, warning, error, and dark.

<script setup lang="ts">
import { Badge } from "@bridge-ui/vue/Components/Badge";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Badge color="primary">primary</Badge>
    <Badge color="secondary">secondary</Badge>
    <Badge color="success">success</Badge>
    <Badge color="info">info</Badge>
    <Badge color="warning">warning</Badge>
    <Badge color="error">error</Badge>
    <Badge color="dark">dark</Badge>
  </div>
</template>

import { Badge } from "@bridge-ui/react/Components/Badge";

export default function BadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge color="primary">primary</Badge>
      <Badge color="secondary">secondary</Badge>
      <Badge color="success">success</Badge>
      <Badge color="info">info</Badge>
      <Badge color="warning">warning</Badge>
      <Badge color="error">error</Badge>
      <Badge color="dark">dark</Badge>
    </div>
  );
}

Variants

The Badge component supports three style variants, set with the variant prop:

flat (default) — subtle background tint
solid — filled background with contrasting text
outline — transparent background with a colored border

<script setup lang="ts">
import { Badge } from "@bridge-ui/vue/Components/Badge";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Badge variant="flat" color="primary">flat</Badge>
    <Badge color="primary" variant="solid">solid</Badge>
    <Badge color="primary" variant="outline">outline</Badge>
  </div>
</template>

import { Badge } from "@bridge-ui/react/Components/Badge";

export default function BadgeVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="flat" color="primary">
        flat
      </Badge>
      <Badge color="primary" variant="solid">
        solid
      </Badge>
      <Badge color="primary" variant="outline">
        outline
      </Badge>
    </div>
  );
}

Sizes

Control badge dimensions with the size prop. Available sizes: 2xs, xs, sm (default), md, lg, xl, and 2xl.

<script setup lang="ts">
import { Badge } from "@bridge-ui/vue/Components/Badge";
</script>

<template>
  <div class="flex flex-wrap items-end gap-3">
    <Badge size="2xs">2xs</Badge>
    <Badge size="xs">xs</Badge>
    <Badge size="sm">sm</Badge>
    <Badge size="md">md</Badge>
    <Badge size="lg">lg</Badge>
    <Badge size="xl">xl</Badge>
    <Badge size="2xl">2xl</Badge>
  </div>
</template>

import { Badge } from "@bridge-ui/react/Components/Badge";

export default function BadgeSizes() {
  return (
    <div className="flex flex-wrap items-end gap-3">
      <Badge size="2xs">2xs</Badge>
      <Badge size="xs">xs</Badge>
      <Badge size="sm">sm</Badge>
      <Badge size="md">md</Badge>
      <Badge size="lg">lg</Badge>
      <Badge size="xl">xl</Badge>
      <Badge size="2xl">2xl</Badge>
    </div>
  );
}

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

<script setup lang="ts">
import { Badge } from "@bridge-ui/vue/Components/Badge";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Badge rounded="none">none</Badge>
    <Badge rounded="sm">sm</Badge>
    <Badge rounded="md">md</Badge>
    <Badge rounded="2xl">2xl</Badge>
    <Badge rounded="full">full</Badge>
  </div>
</template>

import { Badge } from "@bridge-ui/react/Components/Badge";

export default function BadgeRounded() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge rounded="none">none</Badge>
      <Badge rounded="sm">sm</Badge>
      <Badge rounded="md">md</Badge>
      <Badge rounded="2xl">2xl</Badge>
      <Badge rounded="full">full</Badge>
    </div>
  );
}

Customization

Fine-tune appearance with className (React) or class (Vue), and the classes prop to target the root element.

<script setup lang="ts">
import { Badge } from "@bridge-ui/vue/Components/Badge";
</script>

<template>
  <Badge
    color="primary"
    :classes="{ root: 'px-4' }"
    class="tracking-widest uppercase shadow-md"
  >
    Styled
  </Badge>
</template>

import { Badge } from "@bridge-ui/react/Components/Badge";

export default function BadgeCustomization() {
  return (
    <Badge
      color="primary"
      classes={{
        root: "px-4",
      }}
      className="tracking-widest uppercase shadow-md"
    >
      Styled
    </Badge>
  );
}

Accessibility

When a Badge communicates a count or status tied to another control, include that information in the parent element’s accessible name (e.g. aria-label="Inbox, 4 unread messages").
Do not rely on badge color alone—ensure the meaning is also conveyed in visible text or an accessible label.
Mini density badges with numbers should remain readable; avoid truncating counts without a clear alternative.

Anatomy

The Badge component renders a root <span> containing its text or numeric content:

<span class="badge-root"> Badge content </span>

Avatar, Button

API

Prop	Type	Default	Description
children	ReactNode	—	Badge content.
classes	BadgeClasses	—	Classes for the root element.
color	BadgeColor	"primary"	Semantic color of the badge.
density	BadgeDensity	"default"	Density preset.
full	boolean	false	Whether the badge is full width.
rounded	BadgeRounded	"md"	Border radius.
size	BadgeSize	"sm"	Badge dimensions.
variant	BadgeVariant	"flat"	Visual style variant.