Skip to main content

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

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

Code

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

Interactive Demo

Alert with a linkHref and linkText supplied

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

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

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

PropertyAttributeDescriptionTypeDefault
bodyTextbody-textAn optional prop defining the text of the body.stringundefined
closeButtonAriaLabelclose-button-aria-labelAn optional prop defining the text read by the screen reader to represent the close Button.string${this.type} Alert Close Button
dataClassNamedata-class-nameAn optional class name prop for the component.stringundefined
dataIddata-idAn optional prop. Gives a valid HTML ID attribute value for the component.stringdhl-alert-${getRandomString()}
dataTestiddata-testidAn optional prop. The test id attached to the component as a data-testid attribute.stringundefined
dataTrackingdata-trackingAn optional data tracking prop for the component.stringundefined
linkHreflink-hrefAn optional prop defining the href of the link.stringundefined
linkTargetlink-targetAn optional prop defining the target of the link.stringundefined
linkTextlink-textAn optional prop defining the text of the link.stringundefined
showCloseButtonshow-close-buttonAn optional boolean prop used to toggle the visibility of the close button.booleantrue
titleTexttitle-textAn optional prop defining the text of the title.stringundefined
typetypeAn 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
variantvariantAn optional prop to select a component design variant."primary" \| "secondary"DHL_ALERT.VARIANT.PRIMARY

Events

EventDescriptionType
dhlClickEvent emitted when the close button is clicked on.CustomEvent<MouseEvent>

CSS Custom Properties

NameDescription
--dhl-alert-background-colorUsed to set the background color of the component.
--dhl-alert-foreground-colorUsed to set the foreground color of the component.
--dhl-alert-link-hover-colorUsed to set the hover color of the component's link.

Dependencies

Depends on

Graph

dhl-alert
dhl-icon-wrapper
dhl-icon

Built by DHL User Interface Library Team!