Base components

Badge group components

Badge groups pair a compact badge with a short message and a trailing arrow - announcement banners for releases, alerts, and reminders. From the Figma Badge group set: outer pill on the 50-tone with a white inner badge, in leading and trailing alignments plus a modern white theme.

Badge group example

New featureWe've just released a new featureNew featureWe've just released a new feature

Installation

Copy the React component from this repository, or import it from the Angular library.

# React - copy the component into your project
# components/ui/Badge.tsx (BadgeGroup) from this repository, then:
import { BadgeGroup } from "./components/Badge";

# Angular - once adek-ui is installed:
import { AdekBadgeGroup } from 'adek-ui';

Badge group examples

Below are examples and variations of the badge group component.

Fill color, leading badge

The badge sits before the message on the 50-tone surface - gray, brand, error, warning, and success.

New featureWe've just released a new featureNew featureWe've just released a new featureErrorThere was a problem with that actionWarningJust a few days left to registerSuccessYour profile has been updated

Fill color, trailing badge

The badge moves after the message - use when the label is secondary to the announcement.

New featureWe've just released a new featureNew featureWe've just released a new featureErrorThere was a problem with that actionWarningJust a few days left to registerSuccessYour profile has been updated

Modern

White surface with border and shadow-xs for neutral announcements, in both alignments.

New featureWe've just released a new featureUpdateAttendance sync is live

FAQs

When should I use a badge group instead of an alert?

Badge groups are single-line teasers that link somewhere - new feature banners, changelog pointers. Use an alert when the message needs a title, body text, or actions.

Which colors are available?

Gray, brand, error, warning, and success on the fill theme, plus the neutral modern theme. Each uses its 50/200/700 utility scale from the tokens.

Can the badge sit after the text?

Yes - set align="trailing". The inner badge and its padding swap sides automatically, and the arrow stays with the message text.

BadgesButtons