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>
A simple default alert — check it out!
</duet-alert>
<duet-alert variation="success">
A simple success alert — check it out!
</duet-alert>
<duet-alert variation="danger">
A simple danger alert — check it out!
</duet-alert>
<duet-alert variation="warning">
A simple warning alert — check it out!
</duet-alert>
Open in new window
<duet-alert icon="messaging-alert">
A default alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="success" icon="messaging-alert">
A success alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="danger" icon="messaging-alert">
A danger alert with an icon on left — check it out!
</duet-alert>
<duet-alert variation="warning" icon="messaging-alert">
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>

Properties #

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

Dependencies #

Depends on #

Graph #

graph TD;
duet-alert --> duet-icon
duet-alert --> duet-button
duet-button --> duet-icon
duet-button --> duet-spinner
style duet-alert fill:#f9f,stroke:#333,stroke-width:4px

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.