Badge - Canvas Design System

When to Use

Use Badge when: Showing metadata (duration, category), status indicators (success, pending), notification counts, or labels on cards and list items. Badges are non-interactive by default.

Don't use when: The label triggers an action — use a Button instead. For longer text or descriptions, use plain text or an Alert.

Variants

Default 45 min Ideation Team Building NEW 3

<?= ws_badge('Default') ?>
<?= ws_badge('45 min', ['variant' => 'duration', 'icon' => 'schedule']) ?>
<?= ws_badge('Ideation', ['variant' => 'category', 'color' => '#F59E0B']) ?>
<?= ws_badge('NEW', ['variant' => 'new']) ?>
<?= ws_badge('3', ['variant' => 'count']) ?>

Status Badges

Use the ws_status() convenience function for common status indicators.

Completed Pending Failed In Review

<?= ws_status('Completed', 'success') ?>
<?= ws_status('Pending', 'warning') ?>
<?= ws_status('Failed', 'error') ?>
<?= ws_status('In Review', 'info') ?>

Sizes

Small Medium Large

<?= ws_badge('Small', ['size' => 'sm']) ?>
<?= ws_badge('Medium', ['size' => 'md']) ?>
<?= ws_badge('Large', ['size' => 'lg']) ?>

Pill Shape

Rounded Ideation

<?= ws_badge('Rounded', ['pill' => true]) ?>

Convenience Functions

Shorthand helpers for the most common badge types.

45 min 2 hours Strategy Retrospective

<?= ws_duration('45 min') ?>
<?= ws_duration('2 hours') ?>
<?= ws_category('Strategy', '#3B82F6') ?>
<?= ws_category('Retrospective', '#EC4899') ?>

Parameters

Parameter	Type	Default	Description
`$text`	string	—	Badge label text (required)
`variant`	string	`default`	`default` \| `duration` \| `category` \| `status` \| `count` \| `new`
`size`	string	`md`	`sm` \| `md` \| `lg`
`icon`	string	`null`	Material icon name
`color`	string	`null`	Custom colour for category badges (hex)
`status`	string	`null`	`success` \| `warning` \| `error` \| `info` (for status variant)
`pill`	bool	`false`	Full border-radius pill shape
`id`	string	`null`	Element ID
`class`	string	`''`	Additional CSS classes
`attrs`	array	`[]`	Extra HTML attributes

Anatomy

.ws-badge — Outer <span>

.ws-badge__icon — Optional leading icon

.ws-badge__text — Label text

CSS Classes

Class	Purpose
`.ws-badge`	Base badge styles
`.ws-badge--default`	Default variant
`.ws-badge--duration`	Duration variant (clock icon)
`.ws-badge--category`	Category variant (custom colour)
`.ws-badge--new`	New label variant
`.ws-badge--count`	Circular count badge
`.ws-badge--sm / --md / --lg`	Size modifiers
`.ws-badge--pill`	Pill shape
`.ws-badge--success / --warning / --error / --info`	Status colour variants

Files

File	Purpose
`includes/components/helpers.php`	`ws_badge()`, `ws_status()`, `ws_duration()`, `ws_category()`
`includes/components/badge.php`	Badge template
`includes/components/components.css`	Badge CSS (`.ws-badge` rules)