import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Shorthand Props" />

# Shorthand Props

Some components accept shorthand values for spacing properties like `padding` and `margin`. These props can be specified in several ways:

## Single Value

When you provide a single value, it applies to all sides:

```jsx
<Box padding="8" /> // 8px padding on all sides
```

## Two Values

When you provide an array with two values, they are applied as [vertical, horizontal]:

```jsx
<Box padding={['8', '16']} />
// 8px padding top/bottom
// 16px padding left/right
```

## Three Values

With three values, they are applied as [top, horizontal, bottom]:

```jsx
<Box padding={['8', '16', '24']} />
// 8px padding top
// 16px padding left/right
// 24px padding bottom
```

## Four Values

With four values, they are applied as [top, right, bottom, left]:

```jsx
<Box padding={['8', '16', '24', '32']} />
// 8px padding top
// 16px padding right
// 24px padding bottom
// 32px padding left
```

## Combining with Responsive Props

You can combine shorthand values with responsive props:

```jsx
<Box
    padding={{
        _: '8',
        'medium-l': ['16', '24'],
        'wide-s': ['16', '24', '32', '40'],
    }}
/>
```

This allows you to have different padding configurations at different breakpoints.
