Package Exports

@commercetools-uikit/flat-button
@commercetools-uikit/flat-button/dist/commercetools-uikit-flat-button.cjs.js
@commercetools-uikit/flat-button/dist/commercetools-uikit-flat-button.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@commercetools-uikit/flat-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FlatButton

Description

Flat buttons are minimal and a flat variation of primary and secondary buttons.

Installation

yarn add @commercetools-uikit/flat-button

npm --save install @commercetools-uikit/flat-button

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import FlatButton from '@commercetools-uikit/flat-button';
import { InformationIcon } from '@commercetools-uikit/icons';

const Example = () => (
  <FlatButton
    tone="primary"
    icon={<InformationIcon />}
    label="A label text"
    onClick={() => alert('Button clicked')}
    isDisabled={false}
  />
);

export default Example;

Properties

Props	Type	Required	Default	Description
`as`	`TStringOrComponent`			You may pass in a string like "a" to have the button element render an anchor tag, or you could pass in a React Component, like a `Link`. The `<FlatButton>` additionally accepts any props or attributes specific to the given element or component.
`tone`	`union` Possible values: `'primary' , 'secondary' , 'inverted' , 'critical'`		`'primary'`	Indicates the color scheme of the button.
`type`	`union` Possible values: `'submit' , 'reset' , 'button'`		`'button'`	Used as the HTML `type` attribute.
`label`	`string`	✅		Should describe what the button is for.
`onClick`	`Function` See signature.			Handler when the button is clicked.
`icon`	`ReactElement`			The icon of the button.
`iconPosition`	`union` Possible values: `'left' , 'right'`		`'left'`	The position of the icon.
`isDisabled`	`boolean`		`false`	Determines if the button is disabled. Note that this influences the `tone` and `onClick` will not be triggered in this state.

Signatures

Signature `onClick`

(
  event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
) => void

Where to use

Main Functions and use cases are:

Secondary or primary action example: clear filters
Expand/Collapse list of fields example: product attributes

@commercetools-uikit/flat-button