import { Meta, Story, Props, Preview } 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.

## Demo

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

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