Alert

The Alert component is used to provide visual feedback to the user after performing an action and can also serve as an attention-grabber to display important information on the page.

Import

React

// with @dhl-official/react-library:
import { DhlAlert } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlAlert } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-alert></dhl-alert>

Vue.js

// with @dhl-official/vue-library:
import { DhlAlert } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlAlert } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlAlert bodyText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur."></DhlAlert>

Angular

<dhl-alert body-text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur."></dhl-alert>

Vue.js

<dhl-alert body-text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur."></dhl-alert>

Interactive Demo

Alert with a linkHref and linkText supplied

To apply correct stylings, ensure that both linkHref and linkText props are supplied.

React

<DhlAlert
linkHref="#"
linkText="Link text"
bodyText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur."
></DhlAlert>

Angular

<dhl-alert
linkHref="#"
linkText="Link text"
bodyText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur."
></dhl-alert>

Vue.js

<dhl-alert
linkHref="#"
linkText="Link text"
bodyText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur."
></dhl-alert>

Positioned Alert with Auto-dismiss

Alerts can be positioned at screen corners and automatically dismiss after a specified duration.

React

<DhlAlert
position="top-right"
type="success"
titleText="Success!"
bodyText="Your changes have been saved."
duration={5}
animationSpeed="normal"
dismissDirection="origin"
></DhlAlert>

Angular

<dhl-alert
position="top-right"
type="success"
title-text="Success!"
body-text="Your changes have been saved."
duration="5"
animation-speed="normal"
dismiss-direction="origin"
></dhl-alert>

Vue.js

<dhl-alert
position="top-right"
type="success"
title-text="Success!"
body-text="Your changes have been saved."
:duration="5"
animation-speed="normal"
dismiss-direction="origin"
></dhl-alert>

New Props:

• position: Position the alert at screen corners (top-right, top-left, bottom-right, bottom-left, center-top, center-bottom)
• duration: Auto-dismiss after specified seconds (e.g., 5 for 5 seconds)
• persistent: Keep alert visible indefinitely (overrides duration)
• animationSpeed: Control animation speed (fast, normal, slow)
• dismissDirection: Direction alert dismisses to (up, down, origin - slides back to where it came from)

Readme

Properties

Property	Attribute	Description	Type	Default
animationSpeed	animation-speed	An optional prop to set the animation speed when dismissing the alert.	"fast" | "normal" | "slow"	DHL_ALERT.ANIMATION_SPEED.NORMAL
bodyText	body-text	An optional prop defining the text of the body.	string	undefined
closeButtonAriaLabel	close-button-aria-label	An optional prop defining the text read by the screen reader to represent the close Button.	string	`${this.type} Alert Close Button`
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`dhl-alert-${getRandomString()}`
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
dataTracking	data-tracking	An optional data tracking prop for the component.	string	undefined
dismissDirection	dismiss-direction	An optional prop to set the direction the alert dismisses to.	"down" | "origin" | "up"	DHL_ALERT.DISMISS_DIRECTION.ORIGIN
duration	duration	An optional prop to set how many seconds the alert should stay visible before auto-dismissing. If not set, the alert will not auto-dismiss.	number	undefined
linkHref	link-href	An optional prop defining the href of the link.	string	undefined
linkTarget	link-target	An optional prop defining the target of the link.	string	undefined
linkText	link-text	An optional prop defining the text of the link.	string	undefined
persistent	persistent	An optional boolean prop to make the alert stay visible indefinitely without auto-dismissing.	boolean	false
position	position	An optional prop to set the position of the alert on the screen.	"bottom-left" | "bottom-right" | "center-bottom" | "center-top" | "top-left" | "top-right"	undefined
showCloseButton	show-close-button	An optional boolean prop used to toggle the visibility of the close button.	boolean	true
titleText	title-text	An optional prop defining the text of the title.	string	undefined
type	type	An optional prop to select the type of the alert. The type of the alert will determine the icon and color of the alert.	Variants.error | Variants.info | Variants.neutral | Variants.success | Variants.warning	DHL_ALERT.TYPE.NEUTRAL
variant	variant	An optional prop to select a component design variant.	"inline" | "toast"	DHL_ALERT.VARIANT.TOAST

Events

Event	Description	Type
dhlAutoDismiss	Event emitted when the alert auto-dismisses.	CustomEvent<void>
dhlClick	Event emitted when the close button is clicked on.	CustomEvent<MouseEvent>

CSS Custom Properties

Name	Description
--dhl-alert-background-color	Used to set the background color of the component.
--dhl-alert-border-color	Used to set the border color of the component.
--dhl-alert-foreground-color	Used to set the foreground color of the component.

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!