Skip to main content
LocalTapiola Turva

Alert ready

Alert 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 icon="messaging-alert">
  A simple alert with an icon on left — check it out!
</duet-alert>

Properties #

PropertyAttributeDescriptionTypeDefault
iconiconIcon to display to the left of the content.string""
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
paddingpaddingControls the padding of the component. Can be one of: "auto", "none".string"auto"
themethemeTheme of the card. Can be one of: "default", "turva".string""
variationvariationStyle variation of the alert. Can be one of: "default", "success", "danger", "warning".string"default"

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.