Skip to main content

<Hidden />

<Hidden /> is used to visually hide components.

Example​

 open Ancestor

@react.component
let make = () => {
  <Stack direction=[xs(#horizontal)] gap=[xs(#one(2))]>
    <Hidden on=[md(true)]> <Placeholder> {"Visible below md"->React.string} </Placeholder> </Hidden>
    <Placeholder bgColor=[xs(Theme.Colors.gray2)]> {"Always visible"->React.string} </Placeholder>
    <Hidden on=[xs(true), md(false)]>
      <Placeholder bgColor=[xs(Theme.Colors.pink)]> {"Hidden below md"->React.string} </Placeholder>
    </Hidden>
  </Stack>
}
info

Resize your browser to see the responsive styles in action.

Visible below md
Always visible
Hidden below md

Props​

<Hidden /> acceppts all props defined by the system props. Furthermore, it also accepts the following properties:

on​

  • Type: responsiveProp<bool>
  • Optional: True
info

The responsiveProp is a customizable type defined in the Ancestor's setup. You can see the default breakpoints defined in the Ancestor's default setup or define your own breakpoints.