---
title: Breakpoints
description: Breakpoints can be accessed through the media object for use in styles
order: 1
---

import { MediaQueriesTable } from '@af/design-system-docs-ui';

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
	name="@atlaskit/primitives"
	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
	directoryName="primitives"
/>

### Media Queries

The primitives `media` object is deprecated for styling. Use the canonical typed media-query
entrypoints from `@atlaskit/css` instead. The [CSS overview](/components/css/overview) contains the
canonical styling guidance.

```tsx
import { css } from '@atlaskit/css';
import type MediaAboveXs from '@atlaskit/css/at-rules/media-above-xs';
import { token } from '@atlaskit/tokens';

const styles = css({
	padding: token('space.100'),
	['@media (min-width: 30rem)' satisfies MediaAboveXs]: {
		padding: token('space.200'),
	},
});
```

<MediaQueriesTable />