Errors in Magic aren't really errors. They are the equivalent of what other frameworks call 'alerts' or 'notifications'.
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:
To add a simple error in Magic:
<div class="error">Unfinished error</div>
This error is incomplete, as it has no colour property. To complete it, we need to add colour.
Magic errors have their own three colours, specifically designed to match them:
<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):
<div class="error blue-darken-1">Blue Darken-1</div>
<div class="error gradient-green">Gradient Green</div>