1. Documentation
  3. Feedback
  5. Badge
ReadmenpmGitHub
  • Introduction
  • Installation
  • Theming
  • Icons
  • Accordion
  • Card
  • Scroll Area
  • Separator
  • Sidebar
  • Field
  • Label
  • Input
  • Textarea
  • Number Field
  • OTP Field
  • Select
  • Combobox
  • Checkbox
  • Radio
  • Switch
  • Slider
  • Toggle
  • Calendar
  • Date Picker
  • File Upload
  • Button
  • Copy Button
  • Dropdown
  • Command
  • Tabs
  • Breadcrumb
  • Pagination
  • Tree
  • Table
  • Data Table
  • Stat
  • Timeline
  • Avatar
  • Status Bar
  • Badge
  • Meter
  • Empty
  • Skeleton
  • Spinner
  • Toast
  • Dialog
  • Sheet
  • Popover
  • Tooltip
  • Text
  • Kbd
  • Code Block
  • Utilities
  • Design rules

Badge

A status chip — the one place in the system where hue carries meaning.

Loading documentation…

Status Bar< PreviousMeterNext >

Powered by heyo

On this page

UsageVariantsDots and iconsSizesPropertiesbadgeVariants

Healthy

Degraded

Down

Draft
<Badge dot variant="success">Healthy</Badge><Badge dot variant="warning">Degraded</Badge><Badge dot variant="danger">Down</Badge><Badge variant="neutral">Draft</Badge>

Because nothing else in heyo-ui is coloured — the primary button is the inverse of the page, not blue — a coloured chip means exactly one thing: status. Spend that carefully.

Usage

tsx
import { Badge } from "@heyo-sh/heyo-ui";<Badge dot variant="success">  Healthy</Badge>;

Variants

NeutralOutlineBrandContrastInfoSuccessWarningDanger12
<Badge variant="neutral">Neutral</Badge><Badge variant="outline">Outline</Badge><Badge variant="brand">Brand</Badge><Badge variant="contrast">Contrast</Badge><Badge variant="info">Info</Badge><Badge variant="success">Success</Badge><Badge variant="warning">Warning</Badge><Badge variant="danger">Danger</Badge><Badge variant="count">12</Badge>

count is the chip a navigation row or a tab carries — it is what Sidebar.MenuBadge renders.

Dots and icons

dot puts a coloured dot before the label. It is the quietest way to show status, and it keeps working for a reader who cannot separate the hues.

Operational

Verified

Throttled

<Badge dot variant="success">Operational</Badge><Badge icon={IconShield} variant="info">Verified</Badge><Badge icon={IconBolt} variant="warning" size="sm">Throttled</Badge>

Sizes

Small

Base

<Badge size="sm" variant="neutral">Small</Badge><Badge size="base" variant="neutral">Base</Badge>
A badge is not a button

If it can be clicked it is a Button or a Toggle. A badge reports; it does not act.

Properties

variant"neutral" | "outline" | "brand" | "contrast" | "info" | "success" | "warning" | "danger" | "count"optional

The tone. It defaults to neutral.

size"sm" | "base"optional

It defaults to base.

dotbooleanoptional

Draws a status dot before the label.

iconIconLikeoptional

A leading glyph — a component, an element, or any node.

childrenReactNodeoptional

The label.

classNamestringoptional

Merged through tailwind-merge.

badgeVariants

The cva definition behind the component, for the rare case something else has to look exactly like a badge.

tsx
import { badgeVariants } from "@heyo-sh/heyo-ui";<span className={badgeVariants({ variant: "success", dot: true })}>Live</span>;