Badge

Displays a badge or a component that looks like a badge.

Variants

Badges come in multiple style variants.

Default
Secondary
Destructive
Outline
Success
Warning

Status Indicators

Badges are commonly used to indicate status.

ActivePendingExpiredDraft

With Icons

Badges can include icons for additional context.

PremiumVerifiedBlocked

Notification Counts

Badges can display notification counts.

3
12
99+

In Context

Badges used alongside other content.

Admin
AS
Member
BJ
Pending

Custom Styling

Badges can be customized with additional classes.

RoundedBluePurplePinkDashed
Open Markdown
FreeBadge

Small status and category labels.

Install with the Proa CLI
proa ui add badge

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Badge recipe - type-safe styling system for Badge component
//!
//! Provides variant styles and base styling for the Badge component.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

/// Base styles for the badge
mod base {
    use super::*;

    pub const BADGE_BASE: &str = tw_join!(
        // Layout
        "inline-flex",
        "items-center",
        // Sizing
        "rounded-md",
        "px-2.5",

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal