export default function Example() {
  const MenuButton = styled(Button, {
    variants: {
      hidden: {
        true: {
          display: "none",
        },
        false: {
          display: "inline-block",
        },
      },
    },
  });

  const Container = styled("div", {
    display: "flex",
    justifyContent: "space-between",
    backgroundColor: theme.colors.secondary,
    boxShadow: theme.shadows["200"],
    color: theme.colors.onSecondary,
    padding: theme.space["100"],
    width: "150px",
    height: "150px",
  });

  const Row = styled("div", {
    display: "flex",
    gap: theme.space["100"],
  });

  return (
    <div>
      <p>Show a menu button below the medium breakpoint</p>
      <Row>
        <Container>
          Mobile first
          <MenuButton
            icon="center"
            hidden={{ "@initial": false, "@notMd": true }}
          >
            <Icon>
              <Menu />
            </Icon>
          </MenuButton>
        </Container>
        <Container>
          Desktop first
          <MenuButton
            icon="center"
            hidden={{ "@initial": true, "@maxMd": false }}
          >
            <Icon>
              <Menu />
            </Icon>
          </MenuButton>
        </Container>
      </Row>
    </div>
  );
}

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