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!

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!

API

Padding

Prop Name
Type
Default
Description
paddingPadding

Determines the padding to be applied.

paddingTopPadding

Determines the top padding to be applied.

paddingRightPadding

Determines the right padding to be applied.

paddingBottomPadding

Determines the bottom padding to be applied.

paddingLeftPadding

Determines the left padding to be applied.

paddingVerticalPadding

Determines the top and bottom padding to be applied.

paddingHorizontalPadding

Determines the left and right padding to be applied.

Props ending with * are required

Beta