export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    >
      <Button variant="primary" isOutline icon="left">
        <Icon size="100">
          <Add />
        </Icon>
        Text button
      </Button>
      <Box css={{ backgroundColor: "$gray60", padding: "$100" }}>
        <Button variant="secondary" isOutline icon="left">
          <Icon size="100">
            <Add />
          </Icon>
          Text button
        </Button>
      </Box>
      <Button variant="cta" isOutline icon="left">
        <Icon size="100">
          <Add />
        </Icon>
        Text button
      </Button>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape