PrimaryButton

Description

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

Installation

pnpm add @commercetools-uikit/primary-button

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

Additionally install the peer dependencies (if not present)

pnpm 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 | unionPossible 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 . | | 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 | FunctionSee signature. | | | Handler when the button is clicked. Required when as is undefined | | size | unionPossible values:TLegacySizes , TSizes | | '20' | Sets the size of the button. small, medium, and big are deprecated. Use 10, 20, instead. | | tone | unionPossible 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