Usage no npm install needed!

<script type="module">
  import commercetoolsUikitSpacingsInsetSquish from 'https://cdn.skypack.dev/@commercetools-uikit/spacings-inset-squish';
</script>

README

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`
`children`	`PropTypes.node`	-	-	-

Scales

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