Variants
CSS Components supports a first-class variant API.
Adding variants
You can add variants by using the variants
config object key. There is no limit to how many variants you can add.
1const Button = styled("button", { 2 css: "baseButton", 3 variants: { 4 color: { 5 teal: "colorTeal", 6 gray: "colorGray", 7 }, 8 }, 9}); 10 11() => <Button color="teal">Button</Button>; 12
A variant accepts the same css style object as the base styles.
Multiple variants
1const Button = styled("button", { 2 css: "baseButton", 3 variants: { 4 color: { 5 teal: "colorTeal", 6 gray: "colorGray", 7 }, 8 size: { 9 small: "sizeSmall", 10 large: "sizeLarge", 11 }, 12 }, 13}); 14 15() => ( 16 <Button color="teal" size="large"> 17 Button 18 </Button> 19); 20
Boolean variants
Variants can be booleans by using true
as the key.
1const Button = styled("button", { 2 // base styles 3 css: "baseButton", 4 variants: { 5 outlined: { 6 true: "outlined", 7 }, 8 }, 9}); 10 11() => <Button outlined>Button</Button>; 12
Compound variants
In the case of needing to set styles of a variant, based on a combination of other variants, you can use the compoundVariants
feature.
1const Button = styled("button", { 2 css: "baseButton", 3 variants: { 4 color: { 5 teal: "colorTeal", 6 gray: "colorGray", 7 }, 8 outlined: { 9 true: "outlined", 10 }, 11 }, 12 13 compoundVariants: [ 14 { 15 color: "teal", 16 outlined: true, 17 css: "colorOutlinedTeal", 18 }, 19 { 20 color: "gray", 21 outlined: true, 22 css: "colorOutlinedGray", 23 }, 24 ], 25}); 26 27() => ( 28 <Button color="teal" outlined> 29 Button 30 </Button> 31); 32
Default variants
You can use the defaultVariants
feature to set a variant by default:
1const Button = styled("button", { 2 css: "baseButton", 3 variants: { 4 color: { 5 teal: "colorTeal", 6 gray: "colorGray", 7 }, 8 }, 9 10 defaultVariants: { 11 color: "teal", 12 }, 13}); 14 15() => <Button>Button</Button>; 16