npm.io
20.6.7 • Published 2 months ago

@commercetools-uikit/spacings-inset-squish

Licence
MIT
Version
20.6.7
Deps
5
Size
21 kB
Vulns
0
Weekly
0
Stars
154

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

Keywords