Visibility

[alekseykurylev]

Hi! It seems to me it would be useful to have prop "visibility" to hide or display components. For example:
<Button visibility={lg: 'hidden'} /> css: @media (min-width: --lg) {display: none;}
or
<Button visibility={lg: 'visible'} /> css: @media (max-width: calc(--lg - 1px)) {display: none;}

You can also add hiding on touch devices.

[LassiterJ]

They wrap the "VisuallyHidden" primitive. Is this not what you're looking for?
https://www.radix-ui.com/primitives/docs/utilities/visually-hidden

[alekseykurylev]

@LassiterJ, VisuallyHidden - hides the element leaving it in the stream, accessible to search robots!

[LassiterJ]

Ah then in that case the display prop for layout components would be the closest thing. "none" is an option and you can use asChild to minimize the generated markup. Pure css can be done by making a utility class like "d-none" or use a scoped class with the media queries.

[vladmoroz]

This kind of thing is the responsibility of layout components, like Box or Flex. Use the display prop to hide or show certain elements across breakpoints:

<Box display={{ lg: 'none' }}>
  <Button />
</Box>

This is a bit more verbose, but we found that off-loading layout responsibilities to these components makes the UI code easier to maintain in the long run.

Aside from margin props on each component, we don’t plan to introduce other layout props on non-layout components.