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.
Bannerreports 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.ToastRegionshows 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
variantprop and theToastVarianttype 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 thestatusprop, which is unchanged. ToastNotificationno longer carries a live region. Rendered on its own it announces nothing. Render it insideBannerorToastRegion, or pass your ownmessagePropsfrom the container that owns the announcement.