Show the label (children) of a Button responsively

[jalik]

There seems to have no way of hiding the label of a <Button> on small screens using a prop.

This is how I would achieve what I want, but it's clearly not something I would do everywhere, it's too verbose and creating a component just for that feels like a "DIY" job.

You'll note that I use the leftSection for the icon, so I also need to handle the padding dynamically...

<Button
  pr={{ xs: 0, sm: 'xs' }}
  leftSection={<FontAwesomeIcon icon={faTrash} />}
>
  <Box visibleFrom="sm">
    Delete
  </Box>
</Button>

What would be great, would be an attribute like contentVisibleFrom or childrenVisibleFrom accepting a MantineSize and handling the other aspects like padding when leftSection is passed automatically.

<Button
  leftSection={<FontAwesomeIcon icon={faTrash} />}
  contentVisibleFrom="sm"
>
  Delete
</Button>

Eventually the attribute contentVisibleFrom could also be implemented in other components that accept children if it does not affect the performance.

This would allow developers to build UI that are more dynamic (compact vs complete).
Having to choose between a Button or an ActionIcon to handle that is kind of extreme and also not very useful since they do not render with the same size (button with size=lg is different than ActionIcon with size=lg).