---
title: "Foundations — Breakpoints"
canonical: https://sky-ui.cf.sky.com/foundations/breakpoints
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Foundations — Breakpoints

Breakpoints describe screen size thresholds and grid structures.

Sky UI provides a set of breakpoints that can be used to create responsive designs, they underpin our responsive props api.

| Key | Values |
| --- | --- |
| xs | 0px |
| sm | 480px |
| md | 640px |
| lg | 800px |
| xl | 960px |
| xxl | 1248px |

**Note:** For further information on working with **Grids** and **Breakpoints**, check out our Layout Guide.

---

## Usage

### Breakpoint Function

The `breakpoint()` function returns a width in pixels, equal to the given breakpoint value.

```js
import { breakpoint } from '@sky-uk/ui-core';

breakpoint('md');

// returns '640px'
```

You can return the breakpoint without a `px` suffix by passing `false` as a second argument. This is useful if you need to use the raw number for calculations.

```js
breakpoint('md', false);

// returns 640
```

We can utilise the `breakpoint()` function to create media queries within our components.

```jsx
const Example = styled.div`
  background-color: red;

  @media (min-width: ${breakpoint('md')}) {
    background-color: blue;
  }
`;
```

### Breakpoints in responsive props

We can also pass objects to our component props to allow for responsive values.

```tsx
<Box $bgColor={{ xs: "positive", xl: "negative" }} $padding={{xs: 4, lg: 5 }}>
  <Text $color="white">Responsive background color</Text>
</Box>
```

---