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>
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>
usage with a link
<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>
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"
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
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
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 |
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 |
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. | "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> |
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
Graph
Built by DHL User Interface Library Team!