Default icon names mapped to each variant. Used when no explicit iconName is provided. / const variantIconMap:...

Default icon names mapped to each variant. Used when no explicit iconName is provided. / const variantIconMap: Record<string, string> = { success: 'check', warning: 'warning', error: 'error' }; const defaultIconName = 'info'; /** An alert banner for displaying important messages with semantic meaning. Alerts communicate status, warnings, errors, and success states with appropriate icons and styling. Can be dismissible (when onDismiss callback is provided) or persistent. Use alerts to: - Display system messages that require user attention - Communicate validation errors or warnings before form submission - Show success confirmations after actions - Provide compliance notices or persistent warnings Variants (success, warning, error) auto-select appropriate icons and colors. Optional heading and custom icon name support for flexibility. Dismissible alerts render a close button when onDismiss callback is provided. Role: Uses role="alert" for screen reader announcement of critical messages.

<ed-alert></ed-alert>

Properties

Name Type Default Description
iconName String string Default icon names mapped to each variant. Used when no explicit iconName is provided. / const variantIconMap: Record<string, string> = { success: 'check', warning: 'warning', error: 'error' }; const defaultIconName = 'info'; /** An alert banner for displaying important messages with semantic meaning. Alerts communicate status, warnings, errors, and success states with appropriate icons and styling. Can be dismissible (when onDismiss callback is provided) or persistent. Use alerts to: - Display system messages that require user attention - Communicate validation errors or warnings before form submission - Show success confirmations after actions - Provide compliance notices or persistent warnings Variants (success, warning, error) auto-select appropriate icons and colors. Optional heading and custom icon name support for flexibility. Dismissible alerts render a close button when onDismiss callback is provided. Role: Uses role="alert" for screen reader announcement of critical messages. / export class EdAlert extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Icon name used for the icon next to the text 1) When not set, the icon is automatically determined by the variant (info for default, check for success, warning for warning, error for error) 2) Set to override the default variant icon
headingVariant String 'headline-lg' | 'headline' | 'headline-sm' | 'title-lg' | 'title' | 'title-sm' = 'title-sm' Heading variant <ed-text-passage size="sm"> <ul> <li>**headline-lg** renders a heading with the heading headline-lg preset treatment</li> <li>**headline** renders a heading with the heading headline preset treatment</li> <li>**headline-sm** renders a heading with the heading headline-sm preset treatment</li> <li>**title-lg** renders a heading with the heading title-lg preset treatment</li> <li>**title** renders a heading with the heading title preset treatment</li> <li>**title-sm** renders a heading with the heading title-sm preset treatment</li> </ul> </ed-text-passage>
tagName String 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2' Dynamic tag name for the component 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page <ed-text-passage size="sm"> <ul> <li>**h1** renders an `h1` tag</li> <li>**h2** renders an `h2` tag. This is the default</li> <li>**h3** renders an `h3` tag</li> <li>**h4** renders an `h4` tag</li> <li>**h5** renders an `h5` tag</li> <li>**h6** renders an `h6` tag</li> </ul> </ed-text-passage>
heading String string Text for the banner heading
dismissed Boolean boolean Dismissed property 1) State that changes to true and is removed when the banner is dismissed
variant String 'success' | 'error' | 'warning' Style variants <ed-text-passage size="sm"> <ul> <li>**success** Confirms a completed action or positive outcome</li> <li>**warning** Calls attention to something that needs awareness or caution</li> <li>**error** Indicates a failure, blocking issue, or required correction</li> </ul> </ed-text-passage>
onDismiss String () => void Callback fired when the dismiss button is clicked 1) When provided, a close button is rendered in the alert 2) When not provided, the alert is not dismissible

Slots

Name Description
- Alert description/message content

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/alert/alert.ts