Colors help you communicate the structure of your UI, emphasize any important information, or signal different states of the UI. Use colors intentionally — they are not decoration and should always serve a purpose.
- Most colors in React UI are semantic: they bear a meaning and target a specific use case. The only non-semantic exception is the neutral colors that are included in React UI due to their frequent usage in UI designs.
- React UI does not try to suggest any global color palettes. Instead, you are encouraged to pick any color palettes you want and map them onto the semantic colors of React UI.
- In general, colors in React UI can be used for either static (most of the text colors and most of the background colors) or interactive use cases (action colors, feedback colors). However, some colors are designed to be either: neutral colors can be used for static and interactive parts similarly to the primary border color.
- Interactive color variants always define hover and active (pressed) states.
- Action, feedback, and neutral colors suggest what color should be used for
the text placed on them. You don't have to think if black or white makes a
better contrast — just use
on-primaryfor text on primary color background or
on-successfor success color background, and you should be safe.
Colors reserved for text. Base text can have primary or secondary priority,
while both priorities can be suppressed with the
disabled variants. Last but
not least, the text colors define the color of links.
Action colors communicate the importance of an action which can be primary or secondary. Using the selected color, you can also mark an action as the currently selected.
Feedback colors help communicate a meaning: green means success, orange means warning, and red means danger or error. On top of that, there are a few more feedback colors to fit various design situations.
Neutral colors are intended for neutral variants of components that support colors. The light color works well with dark backgrounds. Conversely, the dark color stands out on light backgrounds.
Colors reserved for backgrounds.
Backgrounds for the fundamental UI areas and content layering.
👉 Content layers can be separated from background using their
Basic backgrounds for components.
💡 What is the difference between
While the base background is intended for the bottom-most layer of your UI,
the basic background is the default go-to background for components.
Backgrounds to highlight interactive areas on hover and during interaction.
💡 Please note the default interactive background is always transparent, so it does not stand in the way of the underlying component background.
Backgrounds for areas with actionable content.
Backgrounds for feedback areas.
Neutral backgrounds to help you structure your content.
Colors reserved for borders. With borders, you can separate content areas, components, or their parts. For interactive context, you should always use the primary border.
Components can apply colors above using one or more following color groups.
Some components (Alert, Badge, Button, and more) come in more color variants to help you better reflect their place in content hierarchy or the meaning of their content. Following colors are available in such cases:
- action colors (actionable components only):
- feedback colors:
- neutral colors:
There is always a reasonable default for the component in question that can be
changed to any of supported values above through the
successfeedback color for valid state,
warningfeedback color for warning state,
dangerfeedback color for invalid state.
Validation state is always optional. Default styling is applied for the given
component when its
validationState prop is not specified.