Description
Displays a compact, icon-forward label that communicates how urgent or critical an item is, using a consistent visual language of colour and iconography to signal priority level at a glance.
Table rows, list items, and card headers in Open Point — primarily on stakeholder records, consultation tasks, and action items where urgency must be surfaced without expanding the item.
Government teams managing stakeholder relationships often work across dozens of concurrent consultations. Priority needs to be communicated in dense list views without relying on colour alone, so the leading icon provides a redundant signal that meets WCAG 1.4.1.
Anatomy
| Part | Required? | Notes |
|---|---|---|
| Container | Required | Pill-shaped wrapper using --op-radius-pill. Background colour is determined by the priority variant token. |
| Leading icon | Required | A small (16px) icon from the Orbit icon set that reinforces the priority level visually. Must not be removed — it is the redundant non-colour signal required for accessibility. |
| Label text | Required | Short, capitalised priority label (e.g. 'Critical', 'High', 'Medium', 'Low'). Uses --op-text-xs, --op-font-body. |
Variants
Critical
Highest urgency — requires immediate attention
Use for stakeholder issues or consultation actions that are overdue or escalated, where failure to act promptly has significant consequences.
High
Elevated urgency — action needed soon
Use for items due within a short window or flagged by a senior stakeholder. Not yet escalated but trending toward critical.
Medium
Moderate urgency — action needed but not immediately
Use for routine work items that are in progress or scheduled within the normal planning cycle.
Low
Minimal urgency — informational or backlog
Use for items that have been acknowledged but are not time-sensitive. Helps teams deprioritise without losing visibility.
States
| State | Behaviour |
|---|---|
| Default | Displays the priority label with its associated icon and background colour. No interactive behaviour. |
| Inside a focusable parent | The badge itself is not focusable. When it appears inside a focusable row or card, screen readers read the badge label as part of that element's accessible name or description — see aria guidance below. |
Usage guidelines
When to use
- In stakeholder record lists or tables where urgency affects the order of outreach or response.
- On consultation task lists to help coordinators triage workload across multiple projects.
- On action item cards when a deadline or escalation has been set by a manager.
When not to use
- Do not use to communicate general record status (e.g. 'Active', 'Archived', 'Draft') — use Badge instead.
- Do not use more than one BadgePriority per item — if multiple priorities apply, show the highest and surface the others in the detail view.
- Do not use in public-facing Social Point views — priority is an internal operational concept and is not meaningful to community members.
Do / Don't
Do
Use the four defined variants (Critical, High, Medium, Low) consistently across the product so users build reliable mental models.
Don't
Do not create custom variants or recolour the badge outside the token system — inconsistent priority signals erode trust.
Do
Pair BadgePriority with a visible label ('Critical') so colour is never the sole differentiator.
Don't
Do not strip the label to show only the icon in space-constrained layouts — use truncation or abbreviation of surrounding content instead.
Do
Place the badge at the start of a row or near the item title so it is encountered early in reading order.
Don't
Do not place the badge at the end of a long row where it may be missed or encountered after the user has already begun processing the record.
Layout & Spacing
Container padding: --op-space-4 (4px) top/bottom, --op-space-8 (8px) left/right Gap between icon and label: --op-space-4 (4px) Icon size: 16px The badge is inline-flex and does not stretch to fill its container.
Tokens
| Part | Token | Value |
|---|---|---|
| Critical — background | --op-color-status-error-bg | Light red tint. Pair with --op-color-status-error for text and icon. |
| Critical — text and icon | --op-color-status-error | Meets 4.5:1 contrast against --op-color-status-error-bg. |
| High — background | --op-color-status-warning-bg | Light amber tint. Pair with --op-color-status-warning for text and icon. |
| High — text and icon | --op-color-status-warning | Meets 4.5:1 contrast against --op-color-status-warning-bg. |
| Medium — background | --op-color-status-info-bg | Light blue tint. Pair with --op-color-status-info for text and icon. |
| Medium — text and icon | --op-color-status-info | Meets 4.5:1 contrast against --op-color-status-info-bg. |
| Low — background | --op-color-bg-secondary | Neutral surface. Pair with --op-color-text-secondary for text and icon. |
| Low — text and icon | --op-color-text-secondary | Meets 4.5:1 contrast against --op-color-bg-secondary. |
| Label | --op-text-xs | All variants use the same type size. Font: --op-font-body. |
| Border radius | --op-radius-pill | 999px — fully rounded ends. |
Engineering notes
- BadgePriority is a presentational component with no interactive behaviour. It should not receive focus directly.
- The component does not use a wa-* primitive — it is implemented as a styled span or div with an inline wa-icon and a text node.
- When rendered inside a table cell or list item that has an aria-label or aria-labelledby, include the priority text in that accessible name so screen reader users do not need to navigate into the cell to discover it. Example: aria-label="Ngozi Adeyemi — stakeholder record — Critical priority".
- Do not use aria-hidden on the icon. The icon is a meaningful redundant signal and should remain visible to the accessibility tree, or have an aria-label matching the variant name if the text label is visually present.
- When iterating a list of records with BadgePriority, ensure sort order or filter controls are keyboard-accessible so users can surface Critical items without relying on visual scanning.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | BadgePriority itself is not focusable. Focus moves to the parent interactive element (row, card, link). |
| Enter | Not applicable — the badge has no interactive behaviour. |
Why it matters
Government staff using assistive technology must be able to triage workloads as efficiently as sighted users. Priority information that is only communicated through colour, or only discoverable by navigating into a record, creates an unequal experience and may impact service delivery obligations.
Focus
BadgePriority does not receive focus. When it appears inside a focusable table row or card, the priority label must be included in the accessible name or description of the parent element so that screen reader users hear the priority when they reach the item.
ARIA
| Role or attribute | When to use | Example |
|---|---|---|
aria-label (on parent element) | Include the priority variant name in the parent element's accessible name when the badge is the only priority indicator. | <tr aria-label="Consultation — Eastern Freeway Extension — Critical priority"> |
aria-hidden (on icon) | When the text label is always visible alongside the icon, set aria-hidden="true" on the icon to prevent duplicate announcement. | <wa-icon name="alert-circle" aria-hidden="true"></wa-icon> |
Contrast
Critical: --op-color-status-error on --op-color-status-error-bg — minimum 4.5:1 at --op-text-xs. High: --op-color-status-warning on --op-color-status-warning-bg — minimum 4.5:1 at --op-text-xs. Note: amber-on-light-amber combinations are at higher risk of failing — verify in the token build output when updating status tokens. Medium: --op-color-status-info on --op-color-status-info-bg — minimum 4.5:1 at --op-text-xs. Low: --op-color-text-secondary on --op-color-bg-secondary — minimum 4.5:1 at --op-text-xs.
Touch targets
BadgePriority is non-interactive. If placed inside a touch target (e.g. a tappable table row), the parent must meet the 44x44px minimum. Do not reduce row height to accommodate the badge.
Things to avoid
- Removing the text label and showing only the icon in dense layouts.
- Using custom colours outside the status token set — this breaks the contrast guarantee.
- Placing multiple BadgePriority badges on a single item — screen readers will read each one, creating noise.
- Using BadgePriority to communicate non-priority concepts (e.g. 'Flagged', 'New', 'Reviewed') — use Badge for those.