Banner and ToastRegion in the Lovelace design system

@ada-cx/lovelace 1.5.0 splits status messages into two components. Banner reports a condition for as long as it holds. ToastRegion shows a queue of finished events that time out on their own. ToastNotification becomes the card that both render.

New components

These components cover the two kinds of status message.

  • Banner reports an outage, a lost connection, or a failed send. It never queues and never times out, so only its state or a reader dismissal takes it down. Show one banner at a time.
  • ToastRegion shows the toasts on a queue as a labelled landmark region. It owns announcement, dismissal timing, and focus. It shows no toast while a modal overlay is open, and it shows the held toast after the overlay closes.

Breaking changes

ToastNotification changed in two ways. Before GA, Lovelace can ship a breaking change in any release, so read this before you upgrade.

  • The variant prop and the ToastVariant type are gone. The prop chose between a centered single-line cluster and a wrapping multi-line row. The card now wraps on its own, so remove the prop. It has no replacement, and it is not the status prop, which is unchanged.
  • ToastNotification no longer carries a live region. Rendered on its own it announces nothing. Render it inside Banner or ToastRegion, or pass your own messageProps from the container that owns the announcement.