Alerts
Alerts allow you to attract the user’s attention to important information.
They’re quite intense, so use them sparingly.
Basic alerts
Alerts only need children, and optionally a variant, which can be info (default), success, warning, or error.
Hi there, I’m an info alert.
Hi there, I’m a success alert.
Hi there, I’m a warning alert.
Hi there, I’m an error alert.
Alerts with actions
Adding a <button> or a link (<a>) to an alert will make it actionable.
These actions will be displayed on the right side of the alert on desktop, and
at the bottom on mobile.
If you add an action, it’s advisable to put the main text in a <p> tag.
You have reached your maximum number of pets allowed in your account.