@commercetools-uikit/spacings-inset-squish

Inset Squish

Description

If you want to learn more about the spacing components take a look at this article.

Usage

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>;

Using Spacings preset

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>;

Properties

Props	Type	Required	Values	Default
scale	String	-	['s', 'm', 'l']	m
height	String	-	collapsed, expanded	collapsed
children	PropTypes.node	-	-	-

Scales

Scale	Pixel
s	4 x 8
m	8 x 16
l	16 x 32