Clay alerts come in two types: embedded and stripe. This tutorial covers both types and provides several examples of each.
Embedded Alerts
Embedded alerts are usually used inside forms. The element that contains it determines an embedded alert’s width. The close action is not required for embedded alerts. The following embedded alerts can be created with Clay taglibs:
Danger alert (embedded):
<clay:alert
message="This is an error message."
style="danger"
title="Error"
/>
Figure 1: The danger alert notifies the user of an error or issue.
Success alert (embedded):
<clay:alert
message="This is a success message."
style="success"
title="Success"
/>
Figure 2: The success alert notifies the user when an action is successful.
Info alert (embedded):
<clay:alert
message="This is an info message."
title="Info"
/>
Figure 3: The info alert displays general information to the user.
Warning alert (embedded):
<clay:alert
message="This is a warning message."
style="warning"
title="Warning"
/>
Figure 4: The warning alert displays a warning message to the user.
Stripe Alerts
Stripe alerts are placed below the last navigation element (either the header or the navigation bar), and they usually appear on Save action, communicating the status of the action once received from the server. Unlike embedded alerts, stripe alerts require the close action. A stripe alert is always the full width of the container and pushes all the content below it. The following stripe alerts can be created with Clay taglibs:
Danger alert (stripe):
<clay:stripe
message="This is an error message."
style="danger"
title="Error"
/>
Figure 5: The danger striped alert notifies the user that an action has failed.
Success alert (stripe):
<clay:stripe
message="This is a success message."
style="success"
title="Success"
/>
Figure 6: The success striped alert notifies the user that an action has completed successfully.
Info alert (stripe):
<clay:stripe
message="This is an info message."
title="Info"
/>
Figure 7: The info striped alert displays general information about an action to the user.
Warning alert (stripe):
<clay:stripe
message="This is a warning message."
style="warning"
title="Warning"
/>
Figure 8: The warning striped alert warns the user about an action.
Now you know how to alert users!