An inset squish spacing component provides a consistent padding to the inner component, with horizontal padding being proportionally bigger than the vertical padding.
npm install @commercetools-uikit/inset-squishIf you want to learn more about the spacing components take a look at
this
article.
``jsx
import SpacingsInsetSquish from '@commercetools-uikit/spacings-inset-squish';
// button component that uses SpacingsInsetSquish
$3
InsetSquish spacing can be imported and used via
preset as well.`jsx
import Spacings from '@commercetools-uikit/spacings';// button component that uses SpacingsInsetSquish
{/ SUBMIT /}
;
`Properties
| Props | Type | Required | Values | Default |
| ---------- | ---------------- | :------: | ----------------- | ------- |
|
| String | - | ['s', 'm', 'l'] | m |
| children | PropTypes.node | - | - | - |Scales
| Scale | Pixel |
| :---- | :---------- |
| s |
4 x 8 |
| m | 8 x 16 |
| l | 16 x 32` |