Hidden

The Hidden component is a utility component that will help you hide or show content/components in different viewports.

Examples

Single viewport value provided

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

Multiple viewport values provided

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

Props

Hidden

'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>

Status

Alpha

• Component props and basic example usage of the component 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 robust unit test coverage (100% where achievable).
• Component has visual regression coverage of its default and interactive states.
• Component does not introduce any axe violations.
• Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

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 does not introduce any performance regressions.

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.
• Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.