@atlaskit/primitives/constellation/responsive/usage.mdx

Primitives are token-backed low-level building blocks.

---
title: Responsive
description: Responsive helpers and primitives to build responsive UIs.
order: 2
---

## Media query helpers

The media query helper object `media.above[breakpoint]` maps to our [breakpoints](/components/primitives/responsive/breakpoints/examples) as a media query for use in CSS-in-JS. `media.above[breakpoint]` targets all viewports **above** (larger than) the min-width of a given breakpoint

These responsive helpers are designed be used in conjunction with [xcss](/components/primitives/xcss). It is recommended that both are used when available as this uses our media queries to allow for safe, responsive styling.

### Basic example

Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`.

#### xcss

```tsx
const customStyles = xcss({
  display: 'none', // hide by default
  padding: 'space.100',
  [media.above.md]: { display: 'revert' }, // show above md
  [media.above.lg]: { padding: 'space.150' }, // increase padding above md
});

export const Component = ({ children }: { children: ReactNode }) => (
  <Box xcss={customStyles}>{children}</Box>
);
```

#### css

```tsx
const customStyles = css({
  marginBlock: token('space.0'),
  [media.above.xs]: { marginBlock: token('space.025') },
  [media.above.sm]: { marginBlock: token('space.050') },
  [media.above.md]: { marginBlock: token('space.075') },
  [media.above.lg]: { marginBlock: token('space.100') },
  [media.above.xl]: { marginBlock: token('space.150') },
});
```

### Using media.above

It is important to note that the `media.above.xxs` will **always** match, it is explicitly `'@media all'`. This is only included for easy programmatic usage, but it has a negative performance impact.