Padding

Some of our components expose a simple way to modify their padding. The following example showcases the simples way to use the padding prop by giving it a Spacing value.

Example

Edit the code below to see your changes live!

<Box padding="medium" backgroundColor="secondary20">
  Example
</Box>

<Box padding="medium" backgroundColor="secondary20">
  Example
</Box>

You can also specify paddings with an object to handle different paddings with different breakpoints. All values must be of Spacing type.

Example

Edit the code below to see your changes live!

<Box padding={{ mobile: 'none', tablet: 'medium', desktop: 'xLarge' }} backgroundColor="secondary20">
  Example
</Box>

<Box padding={{ mobile: 'none', tablet: 'medium', desktop: 'xLarge' }} backgroundColor="secondary20">
  Example
</Box>

API

Padding

Prop Name	Type	Description
`padding`	`Padding`	Determines the padding to be applied.
`paddingTop`	`Padding`	Determines the top padding to be applied.
`paddingRight`	`Padding`	Determines the right padding to be applied.
`paddingBottom`	`Padding`	Determines the bottom padding to be applied.
`paddingLeft`	`Padding`	Determines the left padding to be applied.
`paddingVertical`	`Padding`	Determines the top and bottom padding to be applied.
`paddingHorizontal`	`Padding`	Determines the left and right padding to be applied.

Props ending with * are required

Beta