Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

How it works

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Basic example

Alerts are available for any length of text, as well as an optional close button.

A very basic alert!

Alert with title

I have a prop for title.

<x-alert message="A very basic alert!"/>
<x-alert title="Alert with title" message="I have a prop for title."/>

<div class="alert alert-primary"
     role="alert">
  A very basic alert!
</div>

<div class="alert alert-primary"
     role="alert">
  <h4 class="alert-heading">
    Alert with title
  </h4>
  I have a prop for title.
</div>

Colored example

For proper styling, use one of the eight required contextual classes (e.g., .alert-success).

A simple primary alert with prop type="primary" - check it out!

A simple secondary alert with prop type="secondary" - check it out!

A simple success alert with prop type="success" - check it out!

A simple danger alert with prop type="danger" - check it out!

A simple warning alert with prop type="warning" - check it out!

A simple info alert with prop type="info" - check it out!

A simple light alert with prop type="light" - check it out!

A simple dark alert with prop type="dark" - check it out!

<x-alert type="primary">A simple primary alert - check it out!</x-alert>
<x-alert type="secondary">A simple secondary alert - check it out!</x-alert>
<x-alert type="success">A simple success alert - check it out!</x-alert>
<x-alert type="danger">A simple danger alert - check it out!</x-alert>
<x-alert type="warning">A simple warning alert - check it out!</x-alert>
<x-alert type="info">A simple info alert - check it out!</x-alert>
<x-alert type="light">A simple light alert - check it out!</x-alert>
<x-alert type="dark">A simple dark alert - check it out!</x-alert>

<div class="alert alert-primary"
     role="alert">
  A simple primary alert with prop <code>type="primary"</code> - check it out!
</div>

<div class="alert alert-secondary"
     role="alert">
  A simple secondary alert with prop <code>type="secondary"</code> - check it out!
</div>

<div class="alert alert-success"
     role="alert">
  A simple success alert with prop <code>type="success"</code> - check it out!
</div>

<div class="alert alert-danger"
     role="alert">
  A simple danger alert with prop <code>type="danger"</code> - check it out!
</div>

<div class="alert alert-warning"
     role="alert">
  A simple warning alert with prop <code>type="warning"</code> - check it out!
</div>

<div class="alert alert-info"
     role="alert">
  A simple info alert with prop <code>type="info"</code> - check it out!
</div>

<div class="alert alert-light"
     role="alert">
  A simple light alert with prop <code>type="light"</code> - check it out!
</div>

<div class="alert alert-dark"
     role="alert">
  A simple dark alert with prop <code>type="dark"</code> - check it out!
</div>

With title and close icon

Alert component has prop title and dismissible for close icon.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Alert for inline dismissal

<x-alert title="Well done!">
  Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer
  so that you can see how spacing within an alert works with this kind of content.
  <hr>
  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</x-alert>

<x-alert message="Alert for inline dismissal" dismissible/>

<div class="alert alert-primary"
     role="alert">
  <h4 class="alert-heading">
    Well done!
  </h4>
  Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

  <hr>
  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</div>

<div class="alert alert-primary alert-dismissible fade show"
     role="alert">
  Alert for inline dismissal
</div>

Icon example

Use prop icon="icon-name" to add supported icon to the alert. By just adding prop icon will be shown a default icon for alert with prop type="info|success|warning|danger".

Alert type info has this icon by default.

Alert type success has this icon by default.

Alert type warning has this icon by default.

Alert type danger has this icon by default.

Override default icon for alert info via prop icon="heart-fill"

Disable default icon for alert warning by not adding prop icon

<x-alert message="Alert type info has this icon by default." type="info" icon/>
<x-alert message="Alert type success has this icon by default." type="success" icon/>
<x-alert message="Alert type warning has this icon by default." type="warning" icon/>
<x-alert message="Alert type danger has this icon by default." type="error" icon/>
<x-alert type="info" icon="heart-fill">
  Override default icon for alert info via prop <code>icon="heart-fill"</code>
</x-alert>
<x-alert type="warning">
  Disable default icon for alert warning via prop <code>:icon="false"</code>
</x-alert>

<div class="alert alert-info d-flex align-items-center"
     role="alert">
  <div>
    Alert type info has this icon by default.
  </div>
</div>

<div class="alert alert-success d-flex align-items-center"
     role="alert">
  <div>
    Alert type success has this icon by default.
  </div>
</div>

<div class="alert alert-warning d-flex align-items-center"
     role="alert">
  <div>
    Alert type warning has this icon by default.
  </div>
</div>

<div class="alert alert-danger d-flex align-items-center"
     role="alert">
  <div>
    Alert type danger has this icon by default.
  </div>
</div>

<div class="alert alert-info d-flex align-items-center"
     role="alert">
  <div>
    Override default icon for alert info via prop <code>icon="heart-fill"</code>
  </div>
</div>

<div class="alert alert-warning"
     role="alert">
  Disable default icon for alert warning by not adding prop <code>icon</code>
</div>

When you use alert with title and icon combined, then icon will not be display. If you really need such case, you can use custom markup via main slot. Find below an example.

<x-alert>
  <div class="d-flex align-items-center mb-2">
    <x-icon name="heart-fill" class="flex-shrink-0 me-2" width="28" height="28"/>
    <h4 class="alert-heading mb-0">Alert with title and icon</h4>
  </div>
  Alert with title and icon.
</x-alert>

<x-alert>
  <h4 class="alert-heading">Alert with title and icon</h4>
  <div class="d-flex align-items-center">
    <x-icon name="heart-fill" class="flex-shrink-0 me-2" width="24" height="24"/>
    <p class="mb-0">
      Alert with title and icon.
    </p>
  </div>
</x-alert>

Session example

Display your message coming from session become easier with alert component.

This is a success message coming from session.

First error message coming from session.
Second error message coming from session.
Third error message coming from session.

<x-alert.flash type="success" dismissible/>

<x-alert.flash type="error" dismissible>
  <ul class="list-unstyled mb-0">
    @foreach($component->messages() as $message)
      <li>{{ $message }}</li>
    @endforeach
  </ul>
</x-alert.flash>

<div class="alert alert-success alert-dismissible fade show"
     role="alert">
  This is a success message coming from session.
</div>

<div class="alert alert-danger alert-dismissible fade show"
     role="alert">
  <ul class="list-unstyled mb-0">
    <li>First error message coming from session.
    </li>

    <li>Second error message coming from session.
    </li>

    <li>Third error message coming from session.
    </li>
  </ul>
</div>