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 | unionPossible values:'primary' , 'secondary' , 'inverted' , 'critical' | | 'primary' | Indicates the color scheme of the button. | | type | unionPossible values:'submit' , 'reset' , 'button' | | 'button' | Used as the HTML type attribute. | | label | string | ✅ | | Should describe what the button is for. | | onClick | FunctionSee signature. | | | Handler when the button is clicked. | | icon | ReactElement | | | The icon of the button. | | iconPosition | unionPossible 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