Alert Ready
Informs user about important changes or conditions in the interface. Use this component if you need to capture user’s attention in a prominent way.
Examples #
<duet-alert class="duet-text-center"> A simple default alert — check it out! </duet-alert>
<duet-alert variation="success" class="duet-text-center"> A simple success alert — check it out! </duet-alert>
<duet-alert variation="danger" class="duet-text-center"> A simple danger alert — check it out! </duet-alert>
<duet-alert variation="warning" class="duet-text-center"> A simple warning alert — check it out! </duet-alert>
<duet-alert dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="success" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="danger" dismissible> A dismissible alert — check it out! </duet-alert>
<duet-alert variation="warning" dismissible> A dismissible alert — check it out! </duet-alert>
<script>
// Select the above alert components
var alerts = document.querySelectorAll("duet-alert")
// For each component, add dismiss event listener
alerts.forEach(function (element) {
element.addEventListener("duetDismiss", function (e) {
console.log("dismissed", e)
})
})
</script>
<duet-alert>
<div class="duet-p-large">
<duet-heading level="h6">Rajoitusehdot</duet-heading>
<duet-paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae porta arcu. Mauris laoreet feugiat
facilisis. Donec tincidunt dapibus orci, sit amet eleifend augue efficitur eget. Duis eget hendrerit arcu, vitae
tempor libero. Mauris at dui efficitur, imperdiet lacus sed, volutpat lorem. Donec sed nulla ac nibh laoreet
egestas.
</duet-paragraph>
<duet-checkbox margin="none" label="Hyväksyn rajoitusehdot"></duet-checkbox>
</div>
</duet-alert>
Properties #
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
accessibleLabel | accessible-label | Adds accessible label for the dismissible alert close button. | string | getLocaleString(this.accessibleLabelDefaults) |
accessibleLabelDefaults | accessible-label-default | Property to change languageDefaults on the component. normally you would handle these strings on an application level and override @accessibleLabel when needed | DuetLangObject | string | { fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message", } |
announcements | announcements | Enable or disabled announcements by assistive technologies. | boolean | true |
autoDismiss | auto-dismiss | Time in milliseconds which is waited before auto dismiss. | number | undefined |
dismissible | dismissible | Should a button be rendered to dismiss the alert? | boolean | false |
focusable | focusable | Should it be possible to focus on alert? | boolean | false |
icon | icon | Icon to display to the left of the content. | string | "" |
margin | margin | Controls the margin of the component. | "auto" | "none" | "auto" |
padding | padding | Controls the padding of the component. | "auto" | "none" | "auto" |
theme | theme | Theme of the card. | "" | "default" | "turva" | "" |
variation | variation | Style variation of the alert. | "danger" | "default" | "success" | "warning" | "default" |
Events #
Event | Description | Type |
---|---|---|
duetDismiss | Emitted when the dismiss button is clicked | CustomEvent<{ component: "duet-alert"; originalEvent: MouseEvent; }> |
Methods #
hide() => Promise<void>
#
Hide.
Returns #
Type: Promise<void>
setFocus(options?: FocusOptions) => Promise<void>
#
Sets focus on the specified duet-alert
.
Works only when focusable property is set to true.
Use this method instead of the global
button.focus()
.
Returns #
Type: Promise<void>
show() => Promise<void>
#
Show.
Returns #
Type: Promise<void>
Usage #
This section includes guidelines for designers and developers about the usage of this component in different contexts.
It is extremely important that any text you add to the components default slot is ALSO replicated on the accessibleLabel property, otherwise a non sighted user will not be able to understand what is going on
When to use #
- When you need to capture user’s attention in a prominent way.
- To inform user about important changes or conditions in the interface.
- To highlight error and success messages in an interface.
- Put alert close to the context it’s referring to e.g. “Apply” or “Save” functionalities, or alternatively, if the alert is related to contents of an entire page, place it at the top of the page.
When not to use #
- For highlighting general content or as a banner. Use Card component instead for such purposes.
- Instead of generic error pages.
Variations #
This section describes the different component variations, their purpose, and when to use each variation.
Name | Purpose |
---|---|
default | Used to convey general information that isn’t critical. For example, you might show an alert that asks for user feedback. |
success | Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed. |
danger | Used to communicate problems that have to be resolved so that user can continue forward. This variation should be always used for e.g. highlighting errors. |
warning | Used to display information that needs user’s attention and may require further steps. |
Accessibility #
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.
- WARNING: There is bug in NVDA screen reader that is causing multiple alert readings when alert contains other components (link, button etc.). It is working correctly for text only.
- Danger and warning alerts have a
role="alert"
defined which makes sure assistive technologies announce them when they appear. - Default and success alert variations have a
role="status"
defined. This makes sure they’re being read after danger and warning alerts. - All alerts use aria-live attributes. This makes sure contents are announced by assistive technologies when updated. This behaviour can be disabled if needed using
announcements
property. - Alerts additionally use
tabindex="0"
to make it possible to access them using tab key or programmatically move focus to them.
Additional considerations #
- Alert component can be used as a toast message as well, view an example.
- When used as a toast, the alerts will appear from the middle top part of the viewport and stack on top of each other if there’s more than one alert.
- When used as a toast (where alerts are dynamically added), the alert's
announcements
property should be set tofalse
, andaria-live
(and other related attributes) should instead be placed on the container element. This improves the reliability of screen reader announcements by ensuring the live region is already in the DOM before it is used. View an example.
Integration
For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.
Tutorials
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Building Layouts
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
Troubleshooting
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.