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

const Example = () => <Stamp tone="primary" label="Hello" />;

export default Example;

Properties

| Props | Type | Required | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------------------- | :------: | --------------- | ------------------------------------------------------------------------ | | tone | unionPossible values:, 'critical', 'warning', 'positive', 'information', 'primary', 'secondary' | | 'information' | Indicates the color scheme of stamp | | isCondensed | boolean | | false | If true, renders a condensed version of the stamp. | | children | ReactNode | | | Content to render within the stamp. @deprecated in favor of label. | | icon | ReactElement | | | Icon to render beside (left) the stamp text. | | label | string | | | Text to render within the stamp. |