eds-alert

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Passing values in Vue 3

The .prop modifier in Vue ensures that you’re binding the property directly on the custom element, rather than setting it as an HTML attribute.

Because HTML attributes are case-insensitive, they could be converted to pressablelabel and pressableurl, and the Stencil component might not correctly map those to the pressableLabel and pressableUrl properties.

Overview

EdsAlert is a versatile alert component for displaying contextual messages.

Key features:

Contextual intents (default, info, warning, error, success) with matching icons and accent colors
Configurable layout direction (horizontal or vertical)
Optional action element (link when URL provided, ghost button otherwise)
Optional dismiss button to close the alert
Left accent border colored per intent

Properties

Property	Attribute	Description	Type	Default
`direction`	`direction`	The layout direction of the alert content.	`"horizontal" \| "vertical"`	`'horizontal'`
`dismissible`	`dismissible`	When true, shows a close button to dismiss the alert.	`boolean`	`false`
`icon`	`icon`	Optional icon override. When not set, an icon matching the intent is shown automatically.	"copy" \| "arrow-right" \| "chevron-right" \| "chevron-left" \| "chevron-down" \| "chevron-up" \| "arrow-left" \| "arrow-up-right" \| "close" \| "add" \| "edit" \| "checkmark" \| "download" \| "upload" \| "view" \| "exit" \| "caretSort" \| "bookmark" \| "createLink" \| "activity" \| "account" \| "analytics" \| "template" \| "documentExport" \| "documentDownload" \| "trashCan" \| "chooseItem" \| "copyLink" \| "dragHorizontal" \| "dragVertical" \| "login" \| "logout" \| "move" \| "replicate" \| "sortAscending" \| "sortDescending" \| "requestQuote" \| "reset" \| "resultDraft" \| "share" \| "play" \| "book" \| "chatOff" \| "forum" \| "shareKnowledge" \| "time" \| "help" \| "customerService" \| "code" \| "rocket" \| "compass" \| "menu" \| "search" \| "settings" \| "notification" \| "user" \| "group" \| "save" \| "document" \| "folder" \| "image" \| "calendar" \| "information" \| "warning" \| "error" \| "checkmark-filled" \| "star" \| "thumbs-up" \| "thumbs-down" \| "twitter" \| "linkedin" \| "facebook" \| "youtube" \| "mastodon" \| "bluesky"	`undefined`
`intent`	`intent`	The visual intent of the alert. ‘info’ is an alias for ‘default’.	`"brand" \| "default" \| "error" \| "info" \| "success" \| "warning"`	`'default'`
`message`	`message`	The main message or text to be displayed in the alert. If not provided, slot content will be used instead.	`string`	`undefined`
`pressableLabel`	`pressable-label`	Label for the action element (link or button).	`string`	`undefined`
`pressableUrl`	`pressable-url`	URL for the action element. When provided, renders a link instead of a button.	`string`	`undefined`

Events

Event	Description	Type
`edsalert`	Emitted when the alert action button is clicked (for non-URL actions).	`CustomEvent<void>`
`edsDismiss`	Emitted when the alert is dismissed.	`CustomEvent<void>`

Dependencies

Used by

components-section
eds-gitlab-contributors
eds-kg-learning-resources
incorrect-use-of-colors

Depends on

Graph

graph TD;
  eds-alert --> eds-icon-wrapper
  eds-alert --> eds-link
  eds-alert --> eds-button
  eds-link --> eds-icon-wrapper
  eds-button --> eds-icon-wrapper
  components-section --> eds-alert
  eds-gitlab-contributors --> eds-alert
  eds-kg-learning-resources --> eds-alert
  incorrect-use-of-colors --> eds-alert
  style eds-alert fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS