Hidden

The Hidden component is a utility component that will help you hide or show content/components in different viewports. Attention: Use Hidden only to control behaviour in a responsive manner. It does not take any sx props.

Example

<Hidden when="narrow">
  <Placeholder height="80px" label="This is not visible in narrow viewport" />
</Hidden>

ReferenceError: Hidden is not defined

Array as when prop

<Hidden when={['narrow', 'wide']}>
  <Placeholder height="80px" label="This is not visible in narrow and wide viewport" />
</Hidden>

ReferenceError: Hidden is not defined

Props

string or Array

Status

Alpha

• Component props are documented on primer.style/react.
• Component does not have any unnecessary third-party dependencies.
• Component can adapt to different themes.
• Component can adapt to different screen sizes.
• Component has 100% test coverage.

Beta

• Component is used in a production application.
• Common usage examples are documented on primer.style/react.
• Common usage examples are documented in storybook stories.
• Component has been reviewed by a systems designer and any resulting issues have been addressed.
• Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Stable

• Component API has been stable with no breaking changes for at least one month.
• Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
• Component has corresponding design guidelines documented in the interface guidelines.
• Component has corresponding Figma component in the Primer Web library.

Edit this page on GitHub

1 contributor

Last edited by pksjce on October 11, 2022