---
title: Hide
description: Hide is a responsive primitive that hides children at specified breakpoints
order: 1
---

import HideExample from '../../../examples/constellation/responsive/hide';
import ShowHideExample from '../../../examples/constellation/responsive/show-hide';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
  name="@atlaskit/primitives"
  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
  directoryName="primitives"
/>

### Hide

This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.

When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.

<Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />

### Mixing Show and Hide

Prefer using consistent `above` or `below` for readability and consistency.

<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />
