export default function Example() {
  const MenuButtonMobile = styled(Button, {
    "@notMd": {
      display: "none",
    },
  });

  const MenuButtonDesktop = styled(Button, {
    display: "none",
    "@maxMd": {
      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
          <MenuButtonMobile icon="center">
            <Icon>
              <Menu />
            </Icon>
          </MenuButtonMobile>
        </Container>
        <Container>
          Desktop first
          <MenuButtonDesktop icon="center">
            <Icon>
              <Menu />
            </Icon>
          </MenuButtonDesktop>
        </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