Feedback

The status layer: alerts for inline page-level messages, toasts for transient notifications, and empty states for screens with nothing to show yet. Alert colors come straight off the semantic ramps, so severity reads the same everywhere.

Alerts

Backup completed

cloud-db-primary finished in 4 minutes — 1.2 GB written to the archive.

Deploy #4821 failed with 3 errors

  • Migration 20260718 timed out after 30 s
  • Asset build exited with status 1
  • Health check never returned 200

Certificate expires in 14 days

portal.bms.com.au renews automatically, but the DNS challenge is failing.

View details Retry challenge

Scheduled maintenance this Saturday 22:00–23:00 AEST.

Details

You are viewing production data. Changes here affect live customers.

Settings saved.

<div class="alert alert-warning">
  <svg class="alert-icon">…</svg>
  <div>
    <p class="alert-title">Certificate expires in 14 days</p>
    <p class="alert-body">…</p>
  </div>
</div>

Notifications

transient toasts — fixed to a corner in real use

Export ready

audit-log-2026-07.csv is ready to download.

Print job queued on LEVEL2-MFP

Update available

bms-ops 3.2 is ready to install on this site.

SW

Sam Whitford

Assigned you fault #2231 — "toner sensor mismatch".

Deploy finished

bms-portal #4822 is live.

Session expiring

You'll be signed out in 5 minutes.

<div class="toast flex gap-3">
  <svg class="size-5 text-success-500">…</svg>
  <div class="flex-1">
    <p class="toast-title">Export ready</p>
    <p class="toast-body">…</p>
  </div>
  <button class="toast-dismiss">…</button>
</div>

Empty states

Simple

No servers yet

Get started by registering the first server for this site.

With dashed border

With starting points

Set up this site

Nothing is connected yet — pick a starting point.

  • Connect a database

    Point the site at its SQL Server instance

  • Pair a controller

    Bring a door or lift controller online

  • Invite an operator

    Give a teammate access to this site

<div class="empty-state">
  <svg class="empty-state-icon">…</svg>
  <p class="empty-state-title">No servers yet</p>
  <p class="empty-state-description">…</p>
  <div class="empty-state-actions"><button class="btn btn-primary">Add server</button></div>
</div>