Component

Message

A short note under a control. With no color it is red, the usual field error.

Classes

Class	Type
message	Component	The note. Regular is 12px.
message-sm	Size	10px. A step under a small field.
message-lg	Size	14px. A step under a large field.
primary	Color	Indigo by default.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default. Used when you set no color.
warning	Color	Amber by default.
info	Color	Sky by default.

Colors

With no color class, the note is red, the same as error. Use another color for a confirmation or a warning.

Primary

Secondary

Tertiary

Neutral

Success

Error

Warning

Info

<p class="message primary">Primary</p>
<p class="message secondary">Secondary</p>
<p class="message tertiary">Tertiary</p>
<p class="message neutral">Neutral</p>
<p class="message success">Success</p>
<p class="message error">Error</p>
<p class="message warning">Warning</p>
<p class="message info">Info</p>

Sizes

Small

Regular

Large

<p class="message message-sm">Small</p>
<p class="message">Regular</p>
<p class="message message-lg">Large</p>

A color class on a parent is inherited. A message inside a primary card follows that card unless the message itself says error, or whichever color you mean.