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:

Color

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.

Background

Colorize background with color utilities.

  • None
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
  • White
  • Transparent

TextColor

Colorize text with color utilities.

  • None
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
  • Body
  • Muted
  • White
  • Black50
  • White50

SnackbarColor

  • None
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
On this page