Alerts

Alerts are used to provide feedback to the user.

1<x-alert title="Watch out!">
2 This is an important alert you should not miss.
3</x-alert>

Types

Alerts come in different types.

1<x-alert type="primary" title="Waiting for approval…">
2 Your request is still pending approval. We will notify you once it is approved.
3</x-alert>
4<x-alert type="success" title="Application submitted">
5 Your application has been submitted successfully.
6</x-alert>
7<x-alert type="warning" title="Incomplete form">
8 Complete all required fields before submitting the form.
9</x-alert>
10<x-alert type="danger" title="Permission denied">
11 You do not have permission to access this resource.
12</x-alert>

Icons

Add icons to your alerts by using the icon attribute.

1<x-alert type="primary" title="Waiting for approval…" icon="clock--mini">
2 Your request is still pending approval. We will notify you once it is approved.
3</x-alert>
4<x-alert type="success" title="Application submitted" icon="check--micro">
5 Your application has been submitted successfully.
6</x-alert>
7<x-alert type="warning" title="Incomplete form" icon="exclamation-triangle--mini">
8 Complete all required fields before submitting the form.
9</x-alert>
10<x-alert type="danger" title="Permission denied" icon="x-mark--mini">
11 You do not have permission to access this resource.
12</x-alert>

Title only

You can also display an alert with only a title.

1<x-alert type="success" title="You've successfully invited John Doe" />
2<x-alert type="danger" title="Unable to send invitation to Jane Doe" icon="x-mark--micro" />

Text only

You can also display an alert with only text.

1<x-alert>
2 This is an important alert you should not miss.
3</x-alert>
4 
5<x-alert icon="check--micro">
6 This is an important alert you should not miss.
7</x-alert>