@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
37 lines (28 loc) • 968 B
text/mdx
---
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 />