Skip to main content

Alert

Displays an alert message.

Structure​

  • alert
    • alert-icon
    • alert-content
      • alert-header
      • alert-body

Example​

¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!

Colors​

To change the alert color, you can use the is-{color} class pattern.

info

To see the available colors, check the Colors section.

Example​

¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!
¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!
¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!
<div class="is-flex is-flex-column is-gap-3">
  <!--  is-primary  -->
  <div class="alert is-primary">
    <iconify-icon class="icon" icon="mdi:home-outline"></iconify-icon>
    <div class="alert-content">
      <div class="alert-header">¡Hola!</div>
      <div class="alert-body">Es hora de descansar un momento ¡Dísfrutalo!</div>
    </div>
  </div>

  <!--  is-warning  -->
  <div class="alert is-warning">
    <iconify-icon class="icon" icon="mdi:alert-circle-outline"></iconify-icon>
    <div class="alert-content">
      <div class="alert-header">¡Hola!</div>
      <div class="alert-body">Es hora de descansar un momento ¡Dísfrutalo!</div>
    </div>
  </div>

  <!--  is-error  -->
  <div class="alert is-error">
    <iconify-icon class="icon" icon="mdi:alert-outline"></iconify-icon>
    <div class="alert-content">
      <div class="alert-header">¡Hola!</div>
      <div class="alert-body">Es hora de descansar un momento ¡Dísfrutalo!</div>
    </div>
  </div>
</div>

Tonal​

Adds a tonal background to the alert. You can use the is-tonal class pattern.

tip

You can combine it with alert colors, for example: is-tonal is-primary, is-tonal is-warning, etc.

¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!
¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!
¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!

Border​

You can add a border to the alert using the is-accent-border class pattern.

¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!
8 mensajes sin leer.

Borderless​

You can remove the alert's border using the is-borderless class pattern.

¡Hola!
Es hora de descansar un momento ¡Dísfrutalo!
8 mensajes sin leer.