Fylgja Alert

An alert is a small message in the top corner of the viewport that tells the user something went wrong or needs their attention. It uses the Toast style, but floats above the page and stays until the user dismisses it. It is built on a popover="manual", so the browser puts it in the top layer and invoker commands show and hide it without JavaScript.

Preview

Press the button to show the alert in the top right corner of the screen.

<button type="button" commandfor="alert-error" command="show-popover">Save changes</button>

<div id="alert-error" popover="manual" role="alert" class="toast alert fixed" data-type="error" style="--inset-t: 1rem; --inset-e: 1rem">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
	Something went wrong. Your changes were not saved.
	<button type="button" commandfor="alert-error" command="hide-popover" aria-label="Dismiss">
		<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
	</button>
</div>

.alert {
	max-inline-size: 24rem;
	margin: 0;

	&:not(:popover-open) {
		display: none;
	}

	> button {
		--btn-stroke: transparent;
		margin-inline-start: auto;
	}
}

Usage

• The alert is a <div popover="manual" role="alert"> with the toast alert classes. Set data-type="error", "warning", or "info" for its color, the same as a toast.
• A button with commandfor and command="show-popover" shows it. In a real app you can also call showPopover() from a script, such as after a request fails.
• The dismiss button inside it uses command="hide-popover". A manual popover does not close on Escape or an outside click, so always include one.
• Place it with the fixed utility and its inset variables. --inset-t and --inset-e put it in the top right corner. Swap in --inset-s for the top left.
• The small .alert rule caps the width, drops the popover centering, keeps the dismiss button at the end, and hides the alert while it is closed, since .toast sets its own display and would otherwise override the hidden popover.

Anatomy

Accessibility

• role="alert" makes screen readers announce the message right away. Keep it for problems, and use a toast with role="status" for routine confirmations.
• The dismiss button is icon only, so it needs an aria-label.
• Focus stays where it was when the alert opens. Keep the message short and make sure nothing in it is required to continue, since keyboard users have to Tab to reach it.
• Do not rely on the accent color alone. Pair the type with a matching icon and clear wording.

Variants

Warning

Use data-type="warning" for a problem that does not stop the user, such as losing the connection.

<button type="button" commandfor="alert-offline" command="show-popover">Go offline</button>

<div id="alert-offline" popover="manual" role="alert" class="toast alert fixed" data-type="warning" style="--inset-t: 1rem; --inset-e: 1rem">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
	You are offline. Changes sync once you reconnect.
	<button type="button" commandfor="alert-offline" command="hide-popover" aria-label="Dismiss">
		<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
	</button>
</div>

Related: Toast, Callout, Modal.