Badges

Semantic badges and tags for status labels, metadata, and counts.

Shadcn Badge

Badges use the shadcn Badge component from @/components/Shadcn/badge.

<Badge variant="success">Active</Badge>

Status

Semantic badge variants used for registry, requests, reports, and events.

Draft

Default

<Badge variant="default">Draft</Badge>
Active

Success

<Badge variant="success">Active</Badge>
Pending

Warning

<Badge variant="warning">Pending</Badge>
Sent

Info

<Badge variant="info">Sent</Badge>
Rejected

Error

<Badge variant="error">Rejected</Badge>
Closed

Slate

<Badge variant="slate">Closed</Badge>
Sync active

Primary

<Badge variant="primary">Sync active</Badge>
Club representative

Muted

<Badge variant="muted">Club representative</Badge>

Tags

Uppercase metadata tags used on profile pages.

Active member

Tag

<Badge variant="tag">Active member</Badge>
Category

Tag outline

<Badge variant="tag-outline">Category</Badge>

Examples

Common badge labels from CESS FRSah tables and cards.

Enrollment open

Enrollment open

<Badge variant="success">Enrollment open</Badge>
Closed

Enrollment closed

<Badge variant="default">Closed</Badge>
Online

Channel online

<Badge variant="success">Online</Badge>
Setup

Channel setup

<Badge variant="warning">Setup</Badge>
Registrations open

Event registrations

<Badge variant="success">Registrations open</Badge>
In progress

In progress

<Badge variant="info">In progress</Badge>

Count

Compact notification badge for unread counts.

28

Unread count

<Badge variant="count">28</Badge>