@commercetools-uikit/stamp

Stamps are visual labels which hold small amounts of information regarding an item. (E.g Indicating if a product is published in a list).

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitStamp from 'https://cdn.skypack.dev/@commercetools-uikit/stamp';
</script>

README

Stamp

Description

Stamps are visual labels which hold small amounts of information regarding an item. (E.g Indicating if a product is published in a list).

Installation

yarn add @commercetools-uikit/stamp

npm --save install @commercetools-uikit/stamp

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import Stamp from '@commercetools-uikit/stamp';
import Text from '@commercetools-uikit/text';

const Example = () => (
  <Stamp tone="primary">
    <Text.Detail>Hello</Text.Detail>
  </Stamp>
);

export default Example;

Properties

Props Type Required Default Description
tone union
Possible values:
, 'critical', 'warning', 'positive', 'information', 'primary', 'secondary'		 Indicates the color scheme of stamp
isCondensed boolean false If true, renders a condensed version of the stamp.
children ReactNode ✅