Package Exports

@commercetools-uikit/flat-button

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

Buttons: Flat Button

Description

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

Usage

import FlatButton from '@commercetools-uikit/flat-button';

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

iconClass label url onClick

Properties

Props	Type	Required	Values	Default	Description
`tone`	`oneOf`	-	`primary`, `secondary`, `iverted`	`primary`	-
`type`	`string`	-	`submit`, `reset`, `button`	`button`	Used as the HTML `type` attribute.
`label`	`string`	✅	-	-	Should describe what the button is for
`onClick`	`func`	✅	-	-	What the button will trigger when clicked
`icon`	`element`	-	-	-	The icon of the button
`iconPosition`	`oneOf`	-	`left`, `right`	`left`	The position of the icon
`isDisabled`	`boolean`	-	-	-	Tells when the button should present a disabled state
`as`	`string` or `element`	-	-	-	You may pass in a string like "a" to have the button render as an anchor tag instead. Or you could pass in a React Component, like a `Link`.

The component further forwards all valid HTML attributes to the underlying button component.

Where to use

Main Functions and use cases are:

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