Variants

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

Example#

Given the following theme.js:

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,
    },
  },
}
 
Copy

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

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

Variant Composition#

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

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

Multiple Variants#

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

<button variant="button.primary.sm text.caps" />
 
Copy

Overriding variant styles#

To override variant syles, simply pass in style props.

<button variant="button.primary" bg="tomato" />
 
Copy