Badge

Badges highlight small pieces of information like statuses or counts.

Examples

Verified

Variant

Size

Label

Rounded

Prefix icon

Suffix icon

Icon only

Restyling the icon slot

FailedFailed

Constrained width

GAP Rogo ISI team permissionsGAP Rogo ISI team permissions

Overview

Use Badge to label statuses, counts, or short tags inline with other content. It's a non-interactive <span> by default. Reach for Button instead if it needs to be clickable.

tsx

import { Badge } from "@rogo-technologies/ui/badge";

<Badge variant="brand">New</Badge>;

Usage

Variants

brand for primary emphasis, outline for secondary information, muted for subtle labels.

tsx

<Badge variant="brand">Brand</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="muted">Muted</Badge>

Sizes

tsx

<Badge size="xxs">xxs</Badge>
<Badge size="lg">lg</Badge>

Rounded

Pill shape, useful for counts or short tags.

tsx

<Badge rounded>12</Badge>

With icons

tsx

import { IconCircleCheck, IconStar } from "@rogo-technologies/ui/icons";

<Badge prefix={<IconCircleCheck />}>Verified</Badge>
<Badge suffix={<IconStar />}>Featured</Badge>

Icon only

tsx

<Badge iconOnly>
  <IconStar />
</Badge>

Restyling the icon slot

prefix, suffix, and iconOnly render into a slot marked with data-badge-slot. Target that when you need to resize or restyle the icon, not [&>span], which also matches the text label and would squash it.

tsx

<Badge prefix={<IconCircleCheck />} className="[&>[data-badge-slot]]:size-4">
  Larger icon
</Badge>

Constrained width

Cap the badge with max-w-* and a text label truncates with an ellipsis on its own. Don't put truncate on the badge itself. The badge is a flex row, so text-overflow there has nothing to act on and the label gets clipped on both edges instead. Pair the cap with a title so the full value stays readable on hover.

tsx

<Badge className="max-w-[12rem]" title={groupName}>
  {groupName}
</Badge>

API

Prop	Type	Default	Description
`variant`	`"brand" \| "outline" \| "muted"`	`"brand"`	Visual style of the badge.
`size`	`"xxs" \| "xs" \| "sm" \| "md" \| "lg"`	`"md"`	Size of the badge.
`rounded`	`boolean`	`false`	Renders the badge with fully rounded corners (pill shape).
`iconOnly`	`boolean`	`false`	Renders a square badge for icon-only use.
`prefix`	`ReactNode`	-	Element to render before the label.
`suffix`	`ReactNode`	-	Element to render after the label.
`render`	`ReactElement \| Function`	-	Renders the badge as a different element.

Additionally, the Badge accepts all standard HTML <span> attributes.

Guidelines

Do

Use brand to draw attention to a single status (e.g. "New", "Beta")
Use outline or muted for neutral metadata that doesn't compete with primary content
Keep labels short: one or two words, or a number
Use iconOnly for status indicators where the icon is self-explanatory

Don't

Don't use a Badge for an interactive element. Use a Button instead
Don't stack many brand badges next to each other, since emphasis stops working when everything is emphasized
Don't put long sentences in a Badge, since the layout assumes single-line, short content

PreviousAvatar

NextButton