Skip to main content

Visibility

Visibility is a wrapper that shows or hides content at different screen sizes, such as a mobile-only menu button.

Import

import { Visibility } from '@vortexlabs/vortex';
import type { VisibilityProps } from '@vortexlabs/vortex';

Allied components

useBreakpoints

Other links

Storybook
Content to show or hide
<Visibility
  hidden={false}
  spacePreserved={false}
>
  Content to show or hide
</Visibility>

Features

  • Shows or hides content with responsive hidden values.
  • Optionally preserves layout space while hidden.
  • Uses CSS to hide content while keeping children mounted.

Hidden

Set hidden to hide content with display: none. Children stay mounted.

hidden: false
hidden: true
<Stack direction="row" gap={4}>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
  <Visibility hidden={false}>
    <Placeholder width={8} height={8} backgroundColor="primary" />
  </Visibility>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
</Stack>

<Stack direction="row" gap={4}>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
  <Visibility hidden>
    <Placeholder width={8} height={8} backgroundColor="primary" />
  </Visibility>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
</Stack>

Space Preserved

Set spacePreserved to hide with visibility: hidden instead, so the content keeps its space.

hidden (display: none — space removed)
hidden + spacePreserved (visibility: hidden — space kept)
<Stack direction="row" gap={4}>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
  <Visibility hidden>
    <Placeholder width={8} height={8} backgroundColor="primary" />
  </Visibility>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
</Stack>

<Stack direction="row" gap={4}>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
  <Visibility hidden spacePreserved>
    <Placeholder width={8} height={8} backgroundColor="primary" />
  </Visibility>
  <Placeholder width={8} height={8} backgroundColor="surface-bold" />
</Stack>

Responsive

Pass a breakpoint object to hidden. Missing breakpoints use the nearest smaller value.

Visible below md, hidden on md+
Hidden below md, visible on md+
<Visibility hidden={{ xs: false, md: true }}>
  <Placeholder backgroundColor="critical" />
</Visibility>

<Visibility hidden={{ xs: true, md: false }}>
  <Placeholder backgroundColor="primary" />
</Visibility>

Accessibility

Description
hidden removes content from layout and from screen readers. With spacePreserved, the space remains, but the content is still hidden from screen readers.
Hidden content stays mounted but cannot receive focus.
Hiding at a breakpoint hides content for everyone at that screen size.