Hide

Conditionally hides content based on viewport width.

Extends: Box

This component's props work differently than other mobile-first min-width media queries since it's often useful to hide an element only at certain breakpoints.

Hidden below the first breakpoint

Hide xs
<Hide xs>
  Hide xs
</Hide>

Hidden at large breakpoints

Hide lg xl
<Hide lg xl>
  Hide lg xl
</Hide>

Hidden when printing

Hide for printing
<Hide print>
  Hide for printing
</Hide>

Props

PropTypeDescription
xsbooleanSets display: none below the sm breakpoint
smbooleanSets display: none between the sm and md breakpoint
mdbooleanSets display: none between the md and lg breakpoint
lgbooleanSets display: none between the lg and xl breakpoint
xlbooleanSets display: none above the xl breakpoint
printbooleanSets display: none for media print