Badge

Badges highlight small pieces of information like statuses or counts.

Examples

Variants

BrandOutlineMuted

Sizes

xxsxssmmdlg

Rounded

New

Draft

With icons

Verified

Featured

Icon only

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>

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 — emphasis stops working when everything is emphasized
Don't put long sentences in a Badge — the layout assumes single-line, short content

PreviousAvatar

NextButton