RoadieRoadie
  • Home
  • Brand
  • Foundations
  • Content
  • Tokens
  • Components
  • Charts
  • Widgets
  • Appearance
HomeBrandFoundations
Appearance

Components

  • Navigation

    • Breadcrumb
    • LinkBeta
    • NavigatorAlpha
    • Steps
    • Tabs
  • Layout

    • Accordion
    • CollapsibleBeta
    • PaneAlpha
    • ScrollArea
    • Separator
  • Actions

    • Button
    • IconButton
    • ToggleBeta
    • Toggle groupBeta
    • ToolbarBeta
  • Fields

    • EditorAlpha
    • Field
    • Fieldset
    • Input
    • Label
    • Number fieldBeta
    • OTP fieldBeta
    • Query fieldAlpha
    • Textarea
  • Choices

    • Autocomplete
    • CheckboxBeta
    • Combobox
    • Radio group
    • Select
    • SliderBeta
    • SwitchBeta
  • Date and time

    • CalendarBeta
    • CalendarTile
    • Countdown
    • Dashboard periodBeta
    • Date fieldBeta
    • Date pickerBeta
    • Date range pickerBeta
    • DateTime
    • Duration
    • Time fieldBeta
  • Collections

    • Card
    • Carousel
    • DataTableBeta
    • ListAlpha
    • Marquee
    • RecordGridAlpha
    • RecordTableAlpha
    • SortableAlpha
    • TableBeta
  • Overlays

    • Dialog
    • Drawer
    • MenuBeta
    • Popover
    • ToastBeta
    • Tooltip
  • Status

    • Badge
    • CalloutBeta
    • DeltaBeta
    • Empty state
    • MeterBeta
    • ProgressBeta
    • SkeletonBeta
    • SparklineBeta
    • StatTileBeta
  • Media & brand

    • AvatarBeta
    • Icon Tile
    • Image
    • Logo
    • PatternBeta
    • QR codeBeta
    • SpotIllustration
  • Text

    • Code
    • Highlight
    • KbdBeta
    • Mark
    • Prose

Badge

Status
Stable
Added
Components 2.0.08 Apr 2026
Updated
Components 2.13.022 Sept 2026
Docs updated
24 Oct 2026

A compact label for status, counts, or categories.

Import

import { Badge } from '@oztix/roadie-components'

Examples

Default

<Badge>Badge</Badge>

Emphasis

<Badge emphasis='strong'>Strong</Badge>
<Badge emphasis='normal'>Normal</Badge>
<Badge emphasis='subtle'>Subtle</Badge>
<Badge emphasis='subtler'>Subtler</Badge>

Sizes

<Badge size='sm'>Small</Badge>
<Badge size='md'>Medium</Badge>

Intents

<Badge intent='neutral'>Neutral</Badge>
<Badge intent='accent'>Accent</Badge>
<Badge intent='brand'>Brand</Badge>
<Badge intent='info'>Info</Badge>
<Badge intent='success'>Success</Badge>
<Badge intent='warning'>Warning</Badge>

With indicator

Use the indicator prop to show a dot before the text. Add indicatorPulse for a slow pulse animation.

<Badge indicator intent='success'>Active</Badge>
<Badge indicator indicatorPulse intent='danger'>Live</Badge>
<Badge indicator intent='info'>Processing</Badge>
<Badge indicator indicatorPulse intent='warning'>Attention</Badge>

Hidden label

Use hideLabel to shrink the badge to just its dot. The badge's own surface is the dot, so intent and emphasis set its look, size sets its size, and indicatorPulse pulses it. The label stays in the DOM, visually hidden, so screen readers still announce it. Position the dot from its container; the badge has no placement prop.

<Badge hideLabel intent='danger' emphasis='strong'>3 unread</Badge>
<Badge hideLabel indicatorPulse intent='success' emphasis='strong'>Live</Badge>
<Badge hideLabel intent='accent' emphasis='subtle'>New</Badge>
<Badge hideLabel size='sm' emphasis='normal'>Draft</Badge>
<span className='relative inline-grid'>
<IconButton aria-label='Notifications'>

With icons

Place icons directly as children. SVGs are automatically sized to match the text.

<Badge intent='success'><CheckCircle weight='bold' /> Verified</Badge>
<Badge intent='danger'><XCircle weight='bold' /> Failed</Badge>
<Badge intent='info'><Info weight='bold' /> Info</Badge>
<Badge intent='warning'><Warning weight='bold' /> Caution</Badge>

Guidelines

Use hideLabel only where space is tight and the surrounding context explains the dot, like the corner of a collapsed nav tile. The hidden label is what a screen reader hears, so it must still describe the state, such as "3 unread", not "3".

API reference

Badge

indicatorboolean

Show a dot indicator before the text

indicatorPulseboolean

Animate the indicator with a slow pulse

hideLabelboolean

Show only a dot; the label stays announced, so it must describe the state.

Defaults to false.

intent"neutral" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info" | null
emphasis"strong" | "normal" | "subtle" | "subtler" | null
size"sm" | "md" | null
Previous page← TooltipNext pageCallout →