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 '@vortex-kit/vortex';
import type { VisibilityProps } from '@vortex-kit/vortex';

Display

<Visibility hide={{ xs: true, sm: true, md: false, lg: true }}>
  {children}
</Visibility>

Design Engineer

hide on: mobile screen

Features

Responsive hide control

Optimized for SSR

Improved performance with CSS-based hiding

Easy integration with other components

Customizable screen size breakpoints

Hide

The hide prop is used to hide content on different screen sizes. You can hide content always or on specific breakpoints.

Design Engineer

Show Code

Hide Examples

hide - Always hidden
hide={{ xs: true, sm: false, md: true, lg: false }} - Shown on sm and lg breakpoints
hide={{ xs: true, sm: true, md: false, lg: true }} - Shown only on md breakpoint

Invisible

The invisible prop allows you to hide content while keeping it in the DOM, which can be useful for accessibility purposes, particularly for screen readers. The content remains in the DOM, taking up space, but is invisible to users while still accessible to assistive technologies.

Design Engineer

Show Code

Accessibility

Visibility component automatically figures out the correct HTML element to render based on the props.

Key	Description
⬢	If as prop is omitted, it defaults to div.
⬢	if invisible prop is true, the content will be hidden while keeping it in the DOM, which can be useful for accessibility purposes, particularly for screen readers.