Skip to main content

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

Open in new window
<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>
Open in new window
<duet-alert icon="messaging-alert" class="duet-text-center">
A default alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="success" icon="messaging-alert" class="duet-text-center">
A success alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="danger" icon="messaging-alert" class="duet-text-center">
A danger alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="warning" icon="messaging-alert" class="duet-text-center">
A warning alert with an icon on left — check it out!
</duet-alert>
Open in new window
<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", e => {
console.log("dismissed", e)
})
})
</script>
Open in new window
<div class="duet-toast">
<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>
</div>

<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", e => {
console.log("dismissed", e)
})
})
</script>
Open in new window
<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>
Open in new window
<div class="duet-toast">
<duet-alert dismissible auto-dismiss="6000">
A dismissible alert — check it out!
</duet-alert>
<duet-alert variation="success" dismissible auto-dismiss="6500">
A dismissible alert — check it out!
</duet-alert>
<duet-alert variation="danger" dismissible auto-dismiss="7000">
A dismissible alert — check it out!
</duet-alert>
<duet-alert variation="warning" dismissible auto-dismiss="7500">
A dismissible alert — check it out!
</duet-alert>
</div>

<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", e => {
console.log("dismissed", e)
})
})
</script>

Properties #

Property Attribute Description Type Default
accessibleLabel accessible-label Adds accessible label for the dismissible alert close button. string "Sulje viesti"
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
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; }>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

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.

Additional considerations #


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:

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.