If you want to learn more about the spacing components take a look at this article.
import SpacingsInsetSquish from '@commercetools-uikit/spacings-inset-squish';
// button component that uses SpacingsInsetSquish
<div className={styles.background}>
<SpacingsInsetSquish scale="m">
<Text.Detail>{/* SUBMIT */}</Text.Detail>
</SpacingsInsetSquish>
</div>;
InsetSquish spacing can be imported and used via spacings
preset as well.
import Spacings from '@commercetools-uikit/spacings';
// button component that uses SpacingsInsetSquish
<div className={styles.background}>
<Spacings.InsetSquish scale="m">
<Text.Detail>{/* SUBMIT */}</Text.Detail>
</Spacings.InsetSquish>
</div>;
Props | Type | Required | Values | Default |
---|---|---|---|---|
scale |
String |
- | ['s', 'm', 'l'] |
m |
height |
String |
- |
collapsed , expanded
|
collapsed |
children |
PropTypes.node |
- | - | - |
Scale | Pixel |
---|---|
s |
4 x 8
|
m |
8 x 16
|
l |
16 x 32
|