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

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

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

Variant Composition

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

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

Multiple Variants

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

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

Callable Variants

Variants can be callable/functions. This is useful for creating dynamic variants based on the component styles.

Here's how you could create an outline button with variants.

const theme = {
  button: {
    primary: {
      bg: "primary",
    },
    secondary: {
      bg: "secondary",
    },
    outline: (theme, styles) => {
      color: styles?.bg 
      borderColor: styles?.bg 
    },
  },
}

// style?.bg returns "primary" with button.primary.outline.
<button variant="button.primary.outline" />

// style?.bg returns "secondary" with button.secondary.outline.
<button variant="button.secondary.outline" />
 CopyCopy

Overriding variant styles

To override variant syles, simply pass in style props.

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