Messages

Errors are announced to screen readers straight away (role="alert"); the other tones are announced politely (role="status").

Info: something worth knowing.

Success: it worked.

Warning: check this before you go on.

Error: something to fix.

<Message tone="info">Info: something worth knowing.</Message>
<Message tone="success">Success: it worked.</Message>
<Message tone="warning">Warning: check this before you go on.</Message>
<Message tone="error">Error: something to fix.</Message>

Say what happened in the text too: the colour and edge are a cue, not the message.