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
Angular
Vue.js

// 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"

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

<dhl-alert></dhl-alert>

// 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
Angular
Vue.js

<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>

<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>

<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
Angular
Vue.js

<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>

<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>

<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>

Inline Alert with Vibrant Style Variant

The styleVariant prop can be set to vibrant when using the inline variant. This applies colored backgrounds matching each alert type, providing a more visually prominent alert.

React
Angular
Vue.js

<DhlAlert
  variant="inline"
  styleVariant="vibrant"
  type="success"
  titleText="Success!"
  bodyText="Your changes have been saved successfully."
  linkHref="#"
  linkText="Learn More"
></DhlAlert>

<dhl-alert
  variant="inline"
  style-variant="vibrant"
  type="success"
  title-text="Success!"
  body-text="Your changes have been saved successfully."
  link-href="#"
  link-text="Learn More"
></dhl-alert>

<dhl-alert
  variant="inline"
  style-variant="vibrant"
  type="success"
  title-text="Success!"
  body-text="Your changes have been saved successfully."
  link-href="#"
  link-text="Learn More"
></dhl-alert>

Positioned Alert with Auto-dismiss

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

React
Angular
Vue.js

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

<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>

<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)

Alert with rich body content (bold, links)

The bodyText prop supports a small set of inline tags so messages can include bold words or inline links without switching to a slot API. This mirrors the behavior of DhlSelectionControl's label prop and is parsed by the shared renderRichText helper.

Supported inline tags:

<b>…</b> — rendered as <strong>
<a href="…" target="…">…</a> — attributes are forwarded to the rendered anchor
<dhl-link …>…</dhl-link>

React
Angular
Vue.js

<DhlAlert
  type="success"
  bodyText="New code sent. Please wait <b>30</b> second(s) before requesting another one."
/>

<dhl-alert
  type="success"
  body-text='New code sent. Please wait <b>30</b> second(s) before requesting another one.'
></dhl-alert>

<dhl-alert
  type="success"
  body-text='New code sent. Please wait <b>30</b> second(s) before requesting another one.'
></dhl-alert>

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`
`styleVariant`	`style-variant`	An optional prop to select a component style variant. Only applies when variant is set to "inline".	`"default" \| "vibrant"`	`DHL_ALERT.STYLE_VARIANT.DEFAULT`
`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

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Alert with a linkHref and linkText supplied​

Inline Alert with Vibrant Style Variant​

Positioned Alert with Auto-dismiss​

Alert with rich body content (bold, links)​

Readme​

Properties​

Events​

CSS Custom Properties​

Dependencies​

Depends on​

Graph​