Variants (different from original variants)

Use the variant API to apply complex styles to a component based on a single prop. This can be a handy way to support slight stylistic variations in button or typography components.

Import the variant function and pass variant style objects in your component definition. When defining variants inline, you can use Styled System like syntax to pick up values from your theme.

Variants are stored within the theme within the variants object, These can either be stored directly within the variants object or they can be as deeply nested within as you would like. The variants can also directly reference the rest of the theme.

Variants theme file example.

{
  "variants": {
    "buttons": {
      "variants": {
        "primary": {},
        "secondary": {}
      }
    }
  }
}

// example Button with variants
import styled from 'styled-components'
import { variant } from '@techstack/styled-system'
 
const Button = styled('button')`
  ${variant({
    key: 'buttons.variants',
  })}
`

The Button component can now use the variant prop to change between a primary and secondary style.

<Button variant='primary'>Primary</Button>
<Button variant='secondary'>Secondary</Button>

Custom Prop Name

If you'd like to use a custom prop name other than variant, use the prop option.

const Text = styled('div')`
  ${variant({
    key: 'buttons.variants',
    prop: 'type'
  })}
`
 
// <Text type='big' />

Built-in Variants

The built-in variants use the following props and theme keys: