Maskow Labs Logo Livewire Components

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>