Skip to main content

Visibility

Component manages responsive visibility and optimizes SSR by using CSS for hiding content, avoiding potential hydration issues. It effectively hides content across various screen sizes.

Import

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

Display

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

Other links

Storybook
<Visibility
  hidden={false}
  spacePreserved={false}
/>

Features

  • Responsive hide control.
  • Optimized for SSR.
  • Improved performance with CSS-based hiding.
  • Easy integration with other components.
  • Customizable screen size breakpoints.

Hidden

When hidden is true, the element is removed from the layout with display: none. When false (the default), it renders normally.

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

<Stack direction="row" gap={4}>
  <Placeholder width={8} height={8} />
  <Visibility hidden>
      <Placeholder width={8} height={8} />
  </Visibility>
  <Placeholder width={8} height={8} />
</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} />
  <Visibility hidden>
      <Placeholder width={8} height={8} />
  </Visibility>
  <Placeholder width={8} height={8} />
</Stack>

<Stack direction="row" gap={4}>
  <Placeholder width={8} height={8} />
  <Visibility hidden spacePreserved>
      <Placeholder width={8} height={8} />
  </Visibility>
  <Placeholder width={8} height={8} />
</Stack>

Responsive

hidden accepts a breakpoint object to show or hide content at different viewport sizes. Resize the viewport to see the effect.

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

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

Accessibility

Both display: none and visibility: hidden hide content from assistive technologies. Use Visibility only for layout-driven show/hide — not as a substitute for proper ARIA attributes.

Description
hidden with display: none removes the element from both layout and the accessibility tree.
spacePreserved uses visibility: hidden, which also hides the element from screen readers while preserving its layout space.