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

Properties #

Property Attribute Description Type Default
icon icon Icon to display to the left of the content. string ""
margin margin Controls the margin of the component. Can be one of: "auto", "none". "auto" or "none" "auto"
padding padding Controls the padding of the component. Can be one of: "auto", "none". "auto" or "none" "auto"
theme theme Theme of the card. Can be one of: "default", "turva". "" or "default" or "turva" ""
variation variation Style variation of the alert. Can be one of: "default", "success", "danger", "warning". "danger" or "default" or "success" or "warning" "default"

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

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes


Troubleshooting

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