Padding

Overview

BigDesign provides a padding prop which can be used for some of our components. Check out a component's prop table to see if the component inherits this prop.

Implementation

The following example showcases the simplest way to use the padding prop by giving it a Spacing value.

Edit the code below to see your changes live!

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

Props

Prop name
Type
Default
Description
paddingSpacing

Determines the padding to be applied.

paddingTopSpacing

Determines the top padding to be applied.

paddingRightSpacing

Determines the right padding to be applied.

paddingBottomSpacing

Determines the bottom padding to be applied.

paddingLeftSpacing

Determines the left padding to be applied.

paddingVerticalSpacing

Determines the top and bottom padding to be applied.

paddingHorizontalSpacing

Determines the left and right padding to be applied.

Props ending with * are required