Alert

<zeno-alert>FeedbackSource

A message shown in the page, with a variant for information, success, warning and error.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Variants

<zeno-alert variant="info" title="New version" message="Version 2.4 is ready to install."></zeno-alert>
<zeno-alert variant="success" title="Saved" message="Your changes are saved."></zeno-alert>
<zeno-alert variant="warning" title="Storage almost full" message="You have used 90% of your space."></zeno-alert>
<zeno-alert variant="error" title="Upload failed" message="report.pdf is larger than 10 MB."></zeno-alert>

Appearances

The default look, then filled and outlined.

<zeno-alert variant="success" message="Your changes are saved."></zeno-alert>
<zeno-alert variant="success" appearance="filled" message="Your changes are saved."></zeno-alert>
<zeno-alert variant="success" appearance="outlined" message="Your changes are saved."></zeno-alert>

Slotted text and actions

Without message, the text comes from the default slot. Buttons go in the actions slot.

The connection was lost while sending report.pdf. Try again

<zeno-alert variant="error" title="Upload failed">
  The connection was lost while sending report.pdf.
  <zeno-button slot="actions" size="sm" variant="outline">Try again</zeno-button>
</zeno-alert>

Closable

The close button hides the alert and fires close, then hide. The element stays in the page; call show() to bring it back.

The alert is open.

Show again

<zeno-alert closable title="Invitation sent" message="We sent an email to ada@example.com."></zeno-alert>
<p data-result>The alert is open.</p>
<zeno-button variant="outline" size="sm">Show again</zeno-button>

const alert = document.querySelector('zeno-alert');
const result = document.querySelector('[data-result]');
alert.addEventListener('hide', () => {
  result.textContent = 'The alert is hidden.';
});
alert.addEventListener('show', () => {
  result.textContent = 'The alert is open.';
});
document.querySelector('zeno-button').addEventListener('click', () => alert.show());

Compact, with a chosen icon

compact uses less padding and a smaller icon. icon takes the name of a registered icon.

<zeno-alert compact variant="success" icon="check" message="Copied to the clipboard."></zeno-alert>
<zeno-alert compact variant="info" icon="star" message="Added to your favourites."></zeno-alert>

Attributes and properties

Property	Attribute	Type	Default	Description
variant	variantreflects	'info' | 'success' | 'warning' | 'error'	'info'
appearance	appearancereflects	'default' | 'filled' | 'outlined'	'default'
title	title	string	''
message	message	string	–
icon	icon	string	–
closable	closablereflects	boolean	false
compact	compactreflects	boolean	false
animateIn	animate-inreflects	boolean	false
animateOut	animate-outreflects	boolean	false
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
show(): void	Show the alert
hide(): void	Hide the alert
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

Event	Detail	Description
show	–	The alert appeared.
hide	–	The alert finished hiding.
close	–	The close button was pressed.

Slots

Slot	Description
Default	The message.
actions	Buttons shown with the message.

CSS parts

Part
actions
base
close
content
icon
message
title

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the close button, when the alert is closable.
EnterSpace	On the close button, hides the alert.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• The alert has role="alert" with aria-live="polite" and aria-atomic="true".
• The title text is rendered as an <h3>.
• The close button is a native <button> with the label “Close alert”.
• The icon is decoration and hidden from assistive technology, so the variant is not announced. Say what happened in the text.
• The animate-in and animate-out animations are turned off when the user asks for reduced motion.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

16 of the 26 properties, methods, events, slots and parts above have no description in the source

• the property variant
• the property appearance
• the property title
• the property message
• the property icon
• the property closable
• the property compact
• the property animateIn
• the property animateOut
• the part actions
• the part base
• the part close
• the part content
• the part icon
• the part message
• the part title

Known gaps:

• The default icon of every variant is missing. The alert asks for info, check-circle, alert-triangle and x-circle, and zeno-icon does not register these names. The icon space stays empty until you register them or set icon to a registered name.
• role="alert" stands for an assertive live region, and aria-live="polite" on the same element says the opposite. There is no attribute to choose one or the other.
• Every alert is a live region, also one that is on the page from the start and only gives static information.
• The heading text uses the title attribute, which is also the native tooltip. Hovering the alert shows the same text again as a tooltip.
• The title is always an <h3>. The level cannot be changed to fit the page outline.
• The close button label “Close alert” is English and cannot be changed.
• hide() always waits 300 ms before it removes the content, also without animate-out and with reduced motion.
• When the close button is used, it disappears with the alert and focus is not moved anywhere.
• The actions slot always adds its top margin, so an alert without actions has extra space under the text.