Alert

Muestra un mensaje de alerta

Estructura

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

Ejemplo

Preview

¡Hola!

Es hora de descansar un momento ¡Dísfrutalo!

Code

<div class="alert">
  <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>

Colores

Para cambiar el color de la alerta, puedes usar patron de clase is-{color}

info

Para ver los colores disponibles, revisa la sección de Colores.

Ejemplo

¡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

Agrega un fondo tonal a la alerta, puedes usar patron de clase is-tonal.

tip

Puedes combinarlo con los colores de alerta, por ejemplo: is-tonal is-primary, is-tonal is-warning, etc.

Preview

¡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!

Code

<div class="is-flex is-flex-column is-gap-3">
  <!--  is-tonal is-primary  -->
  <div class="alert is-primary is-tonal">
    <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-tonal is-warning  -->
  <div class="alert is-warning is-tonal">
    <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-tonal is-error  -->
  <div class="alert is-error is-tonal">
    <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>

Borde

Puedes agregar un borde a la alerta usando el patron de clase is-accent-border.

Preview

¡Hola!

Es hora de descansar un momento ¡Dísfrutalo!

8 mensajes sin leer.

Code

<div class="is-flex is-flex-column is-gap-3">
  <!--  is-accent-border is-primary  -->
  <div class="alert is-primary is-accent-border">
    <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-accent-border is-tonal is-warning  -->
  <div class="alert is-warning is-tonal is-accent-border">
    <div class="alert-content">
      <div class="alert-body">8 mensajes sin leer.</div>
    </div>
  </div>
</div>

Sin bordes

Puedes eliminar el borde de la alerta usando el patron de clase is-borderless.

Preview

¡Hola!

Es hora de descansar un momento ¡Dísfrutalo!

8 mensajes sin leer.

Code

<div class="is-flex is-flex-column is-gap-3">
  <div class="alert is-error is-tonal is-borderless">
    <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>

  <div class="alert is-warning is-tonal is-borderless is-accent-border">
    <div class="alert-content">
      <div class="alert-body">8 mensajes sin leer.</div>
    </div>
  </div>
</div>