Activity Badge
Labels an agenda item with its activity type, using the planner's functional colour coding.
When to Use
Use when:
You're labelling something as an exercise, icebreaker, break, or custom item — on planner cards, agenda rows, library listings, or search results. It replaces the older hand-rolled
.item-type-badge and .type-badge markup.
Variants
Types
Four types, each locked to its planner colour. These colours are a sanctioned exception to Red Unification — activity types stay distinguishable on the canvas, so don't re-theme them.
Exercise
Icebreaker
Break
Custom
<?= ws_activity_badge('exercise') ?>
<?= ws_activity_badge('icebreaker') ?>
<?= ws_activity_badge('break') ?>
<?= ws_activity_badge('custom') ?>Sizes
Use sm inside compact library cards, md on the timeline canvas.
Exercise
Icebreaker
Break
Custom
<?= ws_activity_badge('exercise', ['size' => 'sm']) ?>Custom text
The label defaults to the capitalised type. Override it when the domain has a more precise word — but keep the type argument accurate, because that's what drives the colour.
Design Exercise
Energizer
<?= ws_activity_badge('exercise', ['text' => 'Design Exercise']) ?>States
| State | Behavior |
|---|---|
| Default | The only state. The badge is a static <span> with no hover, focus, active, or disabled treatment. |
| Unknown type | An unrecognised type still emits .ws-activity-badge--{type}, which matches no rule — the badge falls back to the base grey. Validate the type upstream. |
Real-World Usage
On a library card the badge sits in the meta row beside the duration — small size, default text, so the type reads at a glance while scanning the palette.
Crazy 8s
Exercise
8 min
<div class="meta-row">
<?= ws_activity_badge($item['item_type'], ['size' => 'sm']) ?>
<?= ws_duration($item['duration'] . ' min') ?>
</div>Options
| Option | Type | Default | Purpose |
|---|---|---|---|
$type | string | 'exercise' | Positional. exercise | icebreaker | break | custom. Drives both the colour and the default label. |
text | string | ucfirst($type) | Overrides the displayed label without changing the colour |
size | string | 'md' | sm | md. Only sm emits a modifier class. |
id | string | null | Element ID |
class | string | '' | Additional CSS classes |
Accessibility
| Concern | Behavior |
|---|---|
| ARIA | None applied — and none needed. The badge is plain text in a <span>, so the type is read out as written rather than inferred from colour. |
| Keyboard | Not focusable and not interactive. Nothing enters the tab order. |
| Colour independence | This is the component's main accessibility property: the type is always spelled out in the label, so colour is reinforcement, never the sole carrier. Don't blank the text and rely on the swatch. |
| Contrast | Each type pairs a --planner-*-bg tint with its --planner-*-color foreground. Override one and you break the tested pair. |
Tokens
| Token | Used for |
|---|---|
--planner-exercise-bg / --planner-exercise-color | Exercise tint and text (blue) |
--planner-icebreaker-bg / --planner-icebreaker-color | Icebreaker tint and text (green) |
--planner-break-bg / --planner-break-color | Break tint and text (grey) |
--planner-custom-bg / --planner-custom-color | Custom tint and text (purple) |
--gray-50 / --gray-500 | Fallback fill and text for an unrecognised type |
--text-caption / --text-micro | Label size at md and sm |
info
The planner activity colours are the documented exception to Red Unification — see Colors. Every other badge on the platform is red-family.
CSS Classes
| Class | Purpose |
|---|---|
.ws-activity-badge | Base badge |
.ws-activity-badge--exercise | Exercise type colours |
.ws-activity-badge--icebreaker | Icebreaker type colours |
.ws-activity-badge--break | Break type colours |
.ws-activity-badge--custom | Custom type colours |
.ws-activity-badge--sm | Small size (md is the default and emits nothing) |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_activity_badge() helper function |
includes/components/activity-badge.php | Template — type-to-class mapping |
includes/components/components.css | Styles (.ws-activity-badge rules) |
css/planner/base/_variables.css | Source of the --planner-* activity colours |