Skip to main content

Visibility

The Visibility primitive shows or hides content at different screen sizes, with an option to preserve its layout space.

Import

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

Display

<Visibility hidden={{ xs: false, md: true }}>{children}</Visibility>

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 remove content from the layout with display: none. Content is visible when hidden is omitted or false; hiding it does not unmount its children.

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

By default, hidden uses display: none and collapses the element's space. Set spacePreserved to instead use visibility: hidden, keeping the layout space intact.

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.