# Responsive props

## What is a "responsive prop"?

"Responsive prop" is a concept specific to Atomic Layout library. It allows to suffix a prop name with a breakpoint in order to apply the value of that prop on that breakpoint. You can control a breakpoint and responsive behavior to get the most of responsive props.

Responsive props is an essential feature as it dramatically shortens the declaration of various spacing-related CSS properties, allowing you to declare their responsive changes in a few lines of code.

## Declaration

To declare a responsive prop follow this pattern:

![propName + ?breakpointName + ?behavior](/files/-LFX4rAEPBvFDSYdbinJ)

### **Prop name**

Any [Prop alias](/atomic-layout/fundamentals/prop-aliases.md) can be used as a responsive prop name.

{% hint style="info" %}
Note that **not** all props are supported as responsive. In order to preserve an idiological approach of the library you won't be able to use arbitrary props like `textAlign` or `backgroundColor` as responsive, by dedfault.

If you require the responsive support for arbitrary props see the [`useResponsiveProps`](/atomic-layout/api/hooks/use-responsive-props.md) and [`useResponsiveComponent`](/atomic-layout/api/utilities/use-responsive-component.md) hooks.
{% endhint %}

### Breakpoint name

*(Optional)* A breakpoint name from one of the configured [breakpoints](/atomic-layout/fundamentals/breakpoints.md).

### **Behavior**

*(Optional)* Behavior describes how a responsive prop is applied.

* `up` (*Default*) — Applies the given value from the specified breakpoint and up;
* `down` — Applies the given value from the specified breakpoint and down;
* `only` — Applies the given value only for the specified breakpoint.

{% hint style="success" %}
Atomic Layout is mobile-first. This means that by default all responsive props are applied starting **from the given breakpoint and** **up.** You can change this by providing a custom behavior value to a responsive prop.
{% endhint %}

## Defaults

* Default breakpoint behavior is `up`,
* Default measurement unit for numeric prop values is `px`,
* When not suffixed, any prop value is applied for `xs` breakpoint and `up`.

## Examples

### Mobile-first

```jsx
import React from 'react'
import { Box } from 'atomic-layout'

export const Header = ({ children }) => (
  <Box
    paddingVertical={10}
    paddingVerticalMd={20}
    paddingVerticalLg={30}
  >
    {children}
  </Box>
)
```

### Responsive props in areas

```jsx
import React from 'react'
import { Composition } from 'atomic-layout'

export const Post = ({ title, content }) => (
  <Composition
    areas={`
      header
      content
    `}
    gap={10}
    gapLg={20}
  >
    {(Areas) => (
      <>
        <Areas.Header paddingSmOnly={10}>
          <h3>{title}</h3>
        </Areas.Header>
        <Areas.Content>
          <p>{content}</p>
        </Areas.Content>
      </>
    )}
  </Composition>
)
```

Areas generated by the `Composition` component support Responsive props as well.

### Excluding a single prop

```jsx
import React from 'react'
import { Composition } from 'atomic-layout'

export const Post = () => (
  <Composition areas="left right">
    {(Areas) => (
      <Areas.Left
        padding={10}
        paddingMdOnly="initial"
      >
        Right area
      </Areas.Left>
      <Areas.Right>Left area</Areas.Right>
    )}
  </Composition>
)
```

In the example above the `padding={10}` declaration applies `padding: 10px` on all screens, starting from "xs" and up. However, on the "md" screen the padding declaration is rewritten by `paddingMdOnly` and its value is set to "initial".


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redd.gitbook.io/atomic-layout/fundamentals/responsive-props.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.