Data Display

Badge Group

An announcement chip that pairs a small badge with a message — pill or modern, with the badge leading or trailing.

Import

import { BadgeGroup } from "@countryclub/ui-react";

Default

New featureTee-time booking just got smarterWe refreshed the members loungeRead update

Pill · Leading

The tonal pill variant with the badge before the message, in all five colors: gray, brand, error, warning and success.

UpdateCourse maintenance starts MondayNew featureBook caddies straight from the appOverdue3 invoices need your attentionPendingLocker renewals close on FridayConfirmedYour tee time is booked

Pill · Trailing

Set align to trailing to move the badge (with its arrow) after the message.

Course maintenance starts MondayView scheduleBook caddies straight from the appTry it now3 invoices need your attentionView invoicesLocker renewals close on FridayRenew nowYour tee time is bookedView booking

Modern · Leading

The bordered modern variant uses a status dot to carry the color.

UpdateCourse maintenance starts MondayNew featureBook caddies straight from the appOverdue3 invoices need your attentionPendingLocker renewals close on FridayConfirmedYour tee time is booked

Modern · Trailing

The modern variant with a trailing badge.