Pesto UI

Badge Group

An announcement chip: a leading Badge, a short line of copy and an optional trailing mark.

tsx
import { BadgeGroup } from "@pestoui/core"

Variants

NewIntroducing agentsBetaWorkflow builderLiveChat connectorSoonUsage limitsEndingLegacy API

With an addon

The addon is decorative and nudges forward on hover, so the chip reads as a link.

NewIntroducing agentsv2.4Read the changelog

Props

PropTypeDefaultDescription
badgeLabelReact.ReactNode—Text for the leading Badge — “New”, “Beta”, “v2.4”. Required.
variant"default" | "info" | "success" | "warning" | "destructive""default"Tone — sets the chip border and is passed straight through to the leading Badge.
addonReact.ReactNode—Decorative trailing mark, usually a chevron or arrow. Hidden from assistive tech.
childrenReact.ReactNode—The trailing line of copy next to the badge.
PreviousBadgeNext Banner

Pesto UI · 117 documented components