Hidden

Hides children at specific breakpoints. The object properties passed to this component must match the naming of the Sass breakpoints.

import { Hidden } from '@bedrock-ui/core';

$breakpoints: (
  'mobile': 0,
  'tablet': 600,
  'desktop': 1024,
);

<Hidden on={{mobile: false, tablet: true, desktop: false }}>
  Hidden on Tablet Breakpoint
</Hidden>