Overview
The alert component is used to convey important information to the user. It visually draws attention to the content through the use of icons and colour to represent the importance or type of message.
Basic usage
Importing the component
Import the alert component and its related styles.
import { DsAlert } from "@coloplast/design-system";
import "@coloplast/design-system/dist/components/alert/ds-alert.css";
Example usage
Here’s a basic implementation of the alert component, including a dismissible alert with a title and text:
<DsAlert
dismissible
title="Alert title"
text='You can embed <a href="#links">links</a> in here'
></DsAlert>
Component playground and props
You can explore the component and adjust its props in the interactive playground below. Check the 'Controls' tab for more props and descriptions.
Accessibility
The alert component supports different ARIA roles based on the alert's importance:
- status: Used for less critical alerts. Assistive technologies will inform the user politely, meaning the notification will wait until the user finishes their current interaction.
- alert: Used for critical messages requiring immediate attention, such as error messages. This interrupts the user and should be used sparingly.
When the alert includes a dismiss button, ensure the button has an appropriate label (e.g., "Close") to aid screen readers. By default, the label is set to "Close".
Internationalisation
The alert component supports right-to-left (RTL) languages. For dismissible alerts, ensure the dismiss button label is translated appropriately for different locales.