Design Tokens for Mesh have just been released!
Skip to content

Hidden is a layout component to manage the responsive visibility of elements.

Installation

bash
npm install @nib/layout

Usage

jsx
import {Hidden} from '@nib/layout';

Do not style layout components

You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.

Interactive demo

jsx

Props

PropTypeDefaultDescription
childrennodeThe contents of the Hidden.
belowstringA breakpoint value which defines the minimum screen width the content will be visible.
abovestringA breakpoint value which defines the maximum screen width the content will be visible.
printbooleanfalseWhether to hide the content when printing the page.
screenbooleanfalseWhether to hide the content from the screen but still available for screen readers.
screenReaderbooleanfalseWhether to hide the content from the screen reader but not the screen.

Considerations

When using this component, be mindful of the implications it may have on all situations.

A number of situations may intend for the content to still be available for screen reading, but remain visually hidden. In these cases it is essential to use the screen prop instead of the breakpoint props (above and below) as these props hide content for both the screen and screen readers.