Badge
A static visual indicator which can be used to represent numeric values, statuses, labels.
import { Badge } from "@opengovsg/oui"export const Example = () => { return <Badge>Badge</Badge>}Usage
import { Badge } from "@opengovsg/oui"<Badge>New</Badge>Alternatively, install the component as local source via the shadcn CLI:
npx shadcn@latest add https://oui.open.gov.sg/r/badge.jsonpnpm dlx shadcn@latest add https://oui.open.gov.sg/r/badge.jsonnpx shadcn@latest add https://oui.open.gov.sg/r/badge.jsonbunx --bun shadcn@latest add https://oui.open.gov.sg/r/badge.jsonBadge is a static visual indicator for numeric values, statuses, or short labels. It supports start and end content slots, an optional close button, and four variants including a dot mode.
Examples
Sizes
Defaults to sm size.
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex items-center gap-4"> <Badge size="xs">Extra-small</Badge> <Badge size="sm">Small</Badge> <Badge size="md">Medium</Badge> </div> )}Radius
- none: No border radius.
- sm: Small border radius.
- md: Medium border radius.
- lg: Large border radius.
- full: Fully rounded border radius.
Defaults to sm radius.
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex items-center gap-4"> <Badge radius="full">Full</Badge> <Badge radius="lg">Large</Badge> <Badge radius="md">Medium</Badge> <Badge radius="sm">Small</Badge> <Badge radius="none">None</Badge> </div> )}Variants (and Colors)
Defaults to solid variant and main color.
Solid
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex gap-4"> <Badge variant="solid" color="main"> Main </Badge> <Badge variant="solid" color="sub"> Sub </Badge> <Badge variant="solid" color="neutral"> Neutral </Badge> <Badge variant="solid" color="critical"> Critical </Badge> <Badge variant="solid" color="success"> Success </Badge> <Badge variant="solid" color="warning"> Warning </Badge> </div> )}Subtle
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex gap-4"> <Badge variant="subtle" color="main"> Main </Badge> <Badge variant="subtle" color="sub"> Sub </Badge> <Badge variant="subtle" color="neutral"> Neutral </Badge> <Badge variant="subtle" color="critical"> Critical </Badge> <Badge variant="subtle" color="success"> Success </Badge> <Badge variant="subtle" color="warning"> Warning </Badge> </div> )}Outline
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex gap-4"> <Badge variant="outline" color="main"> Main </Badge> <Badge variant="outline" color="sub"> Sub </Badge> <Badge variant="outline" color="neutral"> Neutral </Badge> <Badge variant="outline" color="critical"> Critical </Badge> <Badge variant="outline" color="success"> Success </Badge> <Badge variant="outline" color="warning"> Warning </Badge> </div> )}Dot
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex gap-4"> <Badge variant="dot" color="main"> Main </Badge> <Badge variant="dot" color="sub"> Sub </Badge> <Badge variant="dot" color="neutral"> Neutral </Badge> <Badge variant="dot" color="critical"> Critical </Badge> <Badge variant="dot" color="success"> Success </Badge> <Badge variant="dot" color="warning"> Warning </Badge> </div> )}Start & End Content
import { BellIcon, CheckIcon } from "lucide-react"import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex gap-4"> <Badge color="success" startContent={<CheckIcon size={16} />} variant="outline" > Chip </Badge> <Badge color="main" endContent={<BellIcon size={16} />} variant="subtle"> Badge </Badge> </div> )}With Close Button
If you pass the onClose prop, the close button will be visible. You can override the close icon by passing the endContent prop.
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex gap-4"> <Badge onClose={() => console.log("Badge closed")}>Badge</Badge> <Badge variant="dot" onClose={() => console.log("Badge closed")}> Badge </Badge> </div> )}Accessibility
- Badge is a presentational element; ensure surrounding text or an
aria-labelon the parent conveys its meaning when used in isolation. - When
onCloseis present, the close button renders as an accessible button. Pass meaningfularia-labelcontext if the badge content alone doesn't describe what is being closed. - Badge does not manage focus itself; focus management is the responsibility of the parent context.
Slots
Slots are named regions of the component you can target with custom Tailwind classes via the classNames prop. Each slot below corresponds to a key on the classNames object.
base: The root container element of the badge.content: The inner wrapper that contains the badge children.dot: The small dot rendered on the left side whenvariant="dot".closeButton: The close button rendered whenonCloseis provided.
Custom Styles
You can customize the Badge component by passing custom Tailwind CSS classes to the component slots.
import { Badge } from "@opengovsg/oui"export const Example = () => { return ( <Badge classNames={{ base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30", content: "drop-shadow shadow-black text-white", }} variant="solid" radius="full" > New </Badge> )}Props
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The badge label or content |
startContent | ReactNode | - | Content rendered to the left of the badge label |
endContent | ReactNode | - | Content rendered to the right of the badge label; replaces the close button icon when onClose is also provided |
onClose | (e: PressEvent) => void | - | If provided, renders a close button on the right side of the badge |
variant | "solid" | "subtle" | "outline" | "dot" | "solid" | The visual style variant |
color | "main" | "sub" | "neutral" | "critical" | "warning" | "success" | "main" | The color scheme |
size | "xs" | "sm" | "md" | "sm" | The size of the badge |
radius | "none" | "sm" | "md" | "lg" | "full" | "sm" | The border radius |
isDisabled | boolean | false | Whether the badge is in a disabled state |
classNames | SlotsToClasses<BadgeSlots | "closeButton"> | - | Custom Tailwind classes for component slots |
className | string | - | Additional class applied to the base slot |
refis React's standard ref forwarding to the underlying<div>element; not surfaced as a separate doc-table prop.