Color Utilities

Convey meaning through Color with a handful of color utility classes. Includes support for styling links with hover states, too.

Here is a list of contextual classes that can be applied to most of your components:

Keep in mind: All elements have a color None specified by default.

Colorize component with color utilities.

None - no color will be assigned to an element.
Primary - used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components.
Secondary - used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.
Success - used to indicate the successful completion of an action that user triggered.
Danger - used to represent interface elements that the user should be made aware of.
Warning - used to represent potentially dangerous actions or important messages.
Info - used to present information to the user that is neutral and not necessarily important.
Light - used to indicate a lighter element that is a not important to the user.
Dark - used to indicate a dark element to bring it more into the user attention.
Link - used to indicate a link alike element color.

Colorize background with color utilities.

Colorize text with color utilities.