DocumentationBlocks LibraryGuidesGitHub


Use the variant API to apply complex styles to a component based on a single prop.

This can be a handy way to support stylistic variations in button or typography components.


Given the following theme.js:

export default {
colors: {
primary: "#0cf",
secondary: "#c0f",
text: "#111",
fontSizes: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
space: {
0: "0",
1: "0.25rem",
2: "0.5rem",
3: "0.75rem",
text: {
caps: {
textDecoration: "uppercase",
button: {
color: "text",
fontSize: "md",
primary: {
bg: "primary",
secondary: {
bg: "secondary",
lg: {
fontSize: 3,
sm: {
fontSize: 1,

Use the variant props to apply variant styles to your components.

<button variant="button.primary" />
<a variant="button.secondary" />

Variant Composition#

Variant styles can be composed (from left to right).

Reflexjs will automatically compose your styles using nested composition. Styles are merged in the order that you use them.

<button variant="button.primary.lg" />
<button variant="" />

Multiple Variants#

You can also pass multiple variants to the variant prop for more advanced composition.

<button variant=" text.caps" />

Overriding variant styles#

To override variant syles, simply pass in style props.

<button variant="button.primary" bg="tomato" />
Responsive StylesPseudo Selectors

© 2021 Reflexjs

DocumentationBlocks LibraryGuidesGitHub