Alert

The updated WorkSafeBC alert: one inline message box carrying a tone, a message, and an optional single action. It is a neutral primitive, tone, action, urgency, and icon are all configurable and the component enforces no rules; which combination fits a message is a design decision. Colour meaning stays firm (red is never a claim outcome). Announcement follows an urgency setting, not the colour: passive (role="status") by default, active (role="alert") when a message genuinely needs to interrupt. Every colour is a locked Bold Light badge value, and all text and icons use the uniform badge ink. The examples below are the recommended default for each situation, not a limit.

The six tones

Each tone carries one job. Red is never used for a claim outcome: a declined claim reads as calm information and the verdict rides the badge, not the alert.

Info — calm information

data-tone="info" · role="status" · dismiss optional

A decision has been made on this claim. The decision letter has been added to Documents.

View documents

Review — a state is pending or under review

data-tone="review" · role="status" · no dismiss by default

We are waiting for forms to proceed with this claim. Please submit your report of injury or illness (Form 7).

Complete Form 7

Success — a positive completion

data-tone="success" · role="status" · dismiss optional

Wage-loss benefits have been accepted.

Attention — a genuine action is required

data-tone="attention" · role="status" · no dismiss by default

A response is needed on this claim. Complete the employer report.

Complete report

Error — a system failure, never a claim outcome

data-tone="error" · role="alert" · no dismiss by default

Neutral — a service or maintenance notice

data-tone="neutral" · role="status" · dismiss optional

Online services will be unavailable Sunday 2 to 4 a.m. This is a scheduled maintenance window.

The action slot

Exactly one of three, never more than one. Shown on the info tone. Tab to each control to see its keyboard focus ring; click the dismiss to see the exit and where focus lands afterward.

Link — a single action to the deep work item

data-action="link"

Your report was received on July 12.

View submission

Dismiss — an x control (info, success and neutral only)

data-action="dismiss"

Your report was received on July 12.

None — no action

data-action="none"

Your report was received on July 12.

A custom icon (instance-swap)

The icon defaults from the tone, but any alert can swap it. This is the return-to-work check-in: a review tone with a clock in place of the default glyph.

Check-in — review tone, clock icon

data-tone="review" · custom icon

Your return-to-work check-in is due. Let us know how your recovery is going.

Start check-in

In a narrow container

The message wraps and the action drops below cleanly.

We are waiting for forms to proceed with this claim. Please submit your report of injury or illness (Form 7).

Complete Form 7