BRAID
Braid Logo
 

Hidden

1. Hidden always
2. Hidden below wide
3. Hidden below desktop
4. Hidden below tablet
5. Hidden above mobile
6. Hidden above tablet
7. Hidden above tablet
8. Hidden on print
Open in Playroom

Alternatives

Hiding responsively

You can hide content responsively via the above and below props which accept a breakpoint name, i.e. “mobile”, “tablet”, “desktop” or “wide”.
On “tablet” and above
One
Two
Below “tablet”
Three
Four
Open in Playroom

Hiding on print

You can hide content on print via the print boolean prop.
Hidden on print
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Hidden
  data={{ testid: 'hidden-1' }}
  // => data-testid="hidden-1"
>
  ...
</Hidden>
Open in Playroom