# Hide
To implement Hide component into your project you'll need to add the import:
```jsx
import Hide from "@kiwicom/orbit-components/lib/Hide";

// and Button for example
import Button from "@kiwicom/orbit-components/lib/Button";
```
After adding import into your project you can use it simply like:
```jsx
<Hide on={["smallMobile"]}>
  <Button>
    Hello World!
  </Button>
</Hide>
```
## Props
Table below contains all types of the props available in the Hide component.

| Name          | Type              | Description                     |
| :------------ | :---------------- |:------------------------------- |
| **children**  | `React.Node`      | The children to hide. 
| **on**        | [`enum[]`](#enum) | Array of devices - viewports to hide the children on.
| **block**     | `boolean`         | If `true`, the Hide component will be `display: block` when visible.
  
### enum
| on                | Applies from to width |
| :---------------- | :-------------------- |
| `"largeDesktop"`  | `1200px - ∞`          |
| `"desktop"`       | `992px - 1199px`      |
| `"tablet"`        | `768px - 991px`       |
| `"largeMobile"`   | `576px - 767px`       |
| `"mediumMobile"`  | `414px - 575px`       |
| `"smallMobile"`   | `0px - 413px`         |

## Functional specs
In case `Separator` is used inside `Hide`, `block` property has to be set to `true` to display.