Component Variants

Components use custom variants to allow you to completely customize the look and feel of each component.

The following table lists each component's variant group and default variant name where applicable.

The following components support the variant prop, but do not include default variant keys.

• Box
• Flex
• Donut
• Spinner
• Embed
• AspectRatio
• AspectImage

Additional variants can be added to each group to create multiple styles for a single component. For example, a secondary button style can be added to theme.buttons.secondary then applied to any Button using the variant prop.

// example using a variant
<Button variant="secondary">Secondary</Button>

Components that don't have a dedicated variant group can reference a custom group or any existing variant using group.variant.

// example using a variant for a component without a dedicated variant group
<Box variant="boxes.shout">This Box will standout!</Button>

Example Theme

// example theme
{
  // ...base theme...
  // After the base theme, define the variants:
  buttons: {
    secondary: {
      fontWeight: 'bold',
      color: 'white',
      bg: 'primary',
      '&:hover': {
        bg: 'dark',
      },
    },
  },
  text: {
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '.2em',
    },
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
    },
    display: {
      // extends the text.heading styles
      variant: 'text.heading',
      fontSize: [6, 7, 8],
      fontWeight: 'display',
    },
  },
  cards: {
    primary: {
      padding: 2,
      borderRadius: 4,
      boxShadow: '0 0 4px 1px rgba(0, 0, 0, 0.5)',
    },
  },
  boxes: {
    // Components without a dedicated variant group can reference a custom group or any existing variant using group.variant
    shout: {
      fontWeight: 'bold',
      textTransform: 'uppercase',
    },
  },
}