Alert

 Properties:

• Type (success, error, info)
• Title
• Message

Shoelace

https://shoelace.style/components/alert

<sl-alert variant="primary" open>
  <sl-icon slot="icon" name="info-circle"></sl-icon>
  <strong>This is super informative</strong><br />
  You can tell by how pretty the alert is.
</sl-alert>

<br />

<sl-alert variant="success" open>
  <sl-icon slot="icon" name="check2-circle"></sl-icon>
  <strong>Your changes have been saved</strong><br />
  You can safely exit the app now.
</sl-alert>

<br />

<sl-alert variant="neutral" open>
  <sl-icon slot="icon" name="gear"></sl-icon>
  <strong>Your settings have been updated</strong><br />
  Settings will take effect on next login.
</sl-alert>

<br />

<sl-alert variant="warning" open>
  <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
  <strong>Your session has ended</strong><br />
  Please login again to continue.
</sl-alert>

<br />

<sl-alert variant="danger" open>
  <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
  <strong>Your account has been deleted</strong><br />
  We're very sorry to see you go!
</sl-alert>

vue-dsfr

Alerte - Alert

<template>
  <DsfrAlert
    :title="title"
    :description="description"
    :type="type"
    :small="small"
    :closeable="closeable"
    :closed="closed"
    :is="titleTag"
    @close="close"
  />
</template>

Vuetify

Alerts

<v-alert type="success" title="Alert title" text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!" >
</v-alert>