import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';

<Meta title="Utilities/Responsive Hide" />

# Responsive Hide

Components that export the `hide` property allow you to selectively hide them based on breakpoint.

**Note:**

Having multiple versions of large chunks of UI for different breakpoints is discouraged, since it can result in hard-to-maintain code. Before building complex UIs with the `hide` prop, check to make sure your use case can't instead be solved by either

- the responsive versions of the layout props (e.g. `spacing={{ sm: 'm2', lg: ['mh3', 'mv2'] }}`, `stacked={{ sm: 'column' }}`, `grow={{ md: 1 }}`)
- the `useBreakPoint` hook.

## Demo

<Canvas>
  <Story id="utilities-responsive-hide--demo" />
</Canvas>

## Usage

```jsx
<Box hide="sm">I am hidden in the small breakpoint<Box>
<Box hide="xl">I am hidden in the extra large breakpoint<Box>
<Box hide={['sm', 'xl']}>I am hidden in small and large breakpoints<Box>
```