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

Overview