@commercetools-uikit/primary-button

PrimaryButton

Description

Primary buttons are used for a primary action on a page. You must also pass a label for accessibility reasons.

Installation

yarn add @commercetools-uikit/primary-button

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

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import PrimaryButton from '@commercetools-uikit/primary-button';
import { InformationIcon } from '@commercetools-uikit/icons';

const Example = () => (
  <PrimaryButton
    iconLeft={<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 <PrimaryButton> additionally accepts any props or attributes specific to the given element or component.
type	union Possible values: 'button' , 'reset' , 'submit'		'button'	Used as the HTML type attribute.
label	string	✅		Should describe what the button does, for accessibility purposes (screen-reader users)
iconLeft	ReactElement			The left icon displayed within the button.
iconRight	ReactElement			The right icon displayed within the button.
isToggleButton	boolean		false	If this is active, it means the button will persist in an "active" state when toggled (see isToggled), and back to normal state when untoggled
isToggled	boolean			Tells when the button should present a toggled state. It does not have any effect when isToggleButton is false.
isDisabled	boolean			Tells when the button should present a disabled state.
onClick	Function See signature.			Handler when the button is clicked. Required when as is undefined
size	union Possible values: TLegacySizes , TSizes		'20'	Sets the size of the button. small, medium, and big are deprecated. Use 10, 20, instead.
tone	union Possible values: 'urgent' , 'primary' , 'critical'		'primary'	Indicates the color scheme of the button.

Signatures

Signature onClick

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

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

Examples in the Merchant Center

• Primary action: Save changes
• Affirming affects: Submit a form
• Attracting attention: Add a discount rule