Errors

Errors in Magic aren't really errors. They are the equivalent of what other frameworks call 'alerts' or 'notifications'.


Introduction

Alerts/errors/notifications are a simple and straight-forward way of conveying the status of a request. For example, they can be used to tell the user that his/her login details were incorrect, or that their transaction has been successfully processed.

In Magic, an error looks like this:

I am a 'problem' error!

Adding errors

To add a simple error in Magic:

Unfinished error
<div class="error">Unfinished error</div>

This error is incomplete, as it has no colour property. To complete it, we need to add colour.

Adding colours

Magic errors have their own three colours, specifically designed to match them:

Problem error
Success error
Info error
<div class="error problem">Problem error</div>
<div class="error success">Success error</div>
<div class="error info">Info error</div>

Despite this, you can style errors by adding a Magic Colour class (including gradients):

Blue Darken-1
Gradient Green
<div class="error blue-darken-1">Blue Darken-1</div>
<div class="error gradient-green">Gradient Green</div>