@atlaskit/primitives/constellation/responsive/02-hide/examples.mdx

Primitives are token-backed low-level building blocks.

---
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

Using Hide allows you to Hide the children using CSS `display: none` when the viewport size is above
a specified breakpoint. By default, unless the breakpoint is met, contents are hidden.

Children that are hidden are still rendered into the DOM, so there so there is typically little
performance savings — primarily that they are 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" />