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

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.

Readme

Overview

The dhl-alert component can be used to display different types of alerts, such as informational notes, warnings, errors, and success messages. It comes with built-in support for customizable text and optional links

Usage

Default usage

<dhl-alert>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam earum
  dolorem rerum doloremque alias deserunt id a dolore at nesciunt.
</dhl-alert>

usage with a link

<dhl-alert
  link-text="Link text"
  link-href="#"
>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam earum
  dolorem rerum doloremque alias deserunt id a dolore at nesciunt.
</dhl-alert>

usage without close button

<dhl-alert show-close-button="false">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam earum
  dolorem rerum doloremque alias deserunt id a dolore at nesciunt.
</dhl-alert>

Usage with dhlClick event, link, secondary variant and success type

<dhl-alert
  link-text="Link text"
  link-href="#"
  variant="DHL_ALERT.TYPE.SECONDARY"
  type="DHL_ALERT.TYPE.SUCCESS"
>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam earum
  dolorem rerum doloremque alias deserunt id a dolore at nesciunt.
</dhl-alert>

<script>
  const dhlAlert = document.querySelector("dhl-alert");

  dhlAlert.addEventListener("dhlClick", function (e) {
    e.target.style.display = "none";
  });
</script>

Properties

Property	Attribute	Description	Type	Default
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
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
showCloseButton	show-close-button	An optional boolean prop used to toggle the visibility of the close button.	boolean	true
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.	"error" \| "note" \| "success" \| "warn"	DHL_ALERT.TYPE.NOTE
variant	variant	An optional prop to select a component design variant.	"primary" \| "secondary"	DHL_ALERT.VARIANT.PRIMARY

Events

Event	Description	Type
dhlClick	Event emitted when the close button is clicked on.	CustomEvent<MouseEvent>

Slots

Slot	Description
"unnamed"	unnamed slot for the main content of the alert. You can insert any text or HTML elements within this slot to customize the content of your alert. if you are entering any HTML element other than text, make sure to style it accordingly.

CSS Custom Properties

Name	Description
--dhl-alert-background-color	Used to set the background color of the component.
--dhl-alert-foreground-color	Used to set the foreground color of the component.
--dhl-alert-link-hover-color	Used to set the hover color of the component's link.

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!