Variants

Stitches supports a first-class variant API.

const Button = styled('button', {
// base styles
variants: {
color: {
violet: {
backgroundColor: 'blueviolet',
color: 'white',
'&:hover': {
backgroundColor: 'darkviolet',
},
},
gray: {
backgroundColor: 'gainsboro',
'&:hover': {
backgroundColor: 'lightgray',
},
},
},
},
});
() => <Button color="violet">Button</Button>;

A variant accepts the same style object as the base styles.

const Button = styled('button', {
// base styles
variants: {
color: {
violet: { ...violetStyles },
gray: { ...graytStyles },
},
size: {
small: {
fontSize: '13px',
height: '25px',
paddingRight: '10px',
paddingLeft: '10px',
},
large: {
fontSize: '15px',
height: '35px',
paddingLeft: '15px',
paddingRight: '15px',
},
},
},
});
() => (
<Button color="violet" size="large">
Button
</Button>
);

In the case of needing to set styles of a variant, based on a combination of other variants, you can use the compoundVariants feature.

const Button = styled('button', {
...styles,
variants: {
color: {
violet: { ...violetStyles },
gray: { ...grayStyles },
},
appearance: {
outline: { ...outlineVariants },
},
},
compoundVariants: [
{
color: 'violet',
appearance: 'outline',
css: {
color: 'blueviolet',
borderColor: 'darkviolet',
'&:hover': {
color: 'white',
},
},
},
{
color: 'gray',
appearance: 'outline',
css: {
color: 'gray',
borderColor: 'lightgray',
'&:hover': {
color: 'black',
},
},
},
],
});
() => (
<Button color="violet" appearance="outline">
Button
</Button>
);

You can use the defaultVariants feature to set a variant by default:

const Button = styled('button', {
...styles
variants: {
color: {
violet: { ...violetStyles },
gray: { ...grayStyles }
},
},
defaultVariants: {
color: 'violet'
}
});
() => <Button>Button</Button>

Once configured, you can apply different variants at different breakpoints. You must use the @initial breakpoint to declare the initial variant before any breakpoints are applied.

In the example below, we apply gray initially, then the violet color variant at the @bp2 condition.

const Button = styled('button', {
// base styles
variants: {
color: {
violet: { ...violetStyles },
gray: { ...grayStyles },
},
},
});
() => (
<Button color={{ '@initial': 'gray', '@bp1': 'violet', }} >
Button
</Button>
);