@commercetools-uikit/secondary-icon-button

SecondaryIconButton

Description

Secondary Icon Buttons are "icon-only" buttons and a restricted version of the `<IconButton>`. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.

Installation

yarn add @commercetools-uikit/secondary-icon-button

npm --save install @commercetools-uikit/secondary-icon-button

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
import { InformationIcon } from '@commercetools-uikit/icons';

const Example = () => (
  <SecondaryIconButton
    icon={<InformationIcon />}
    label="A label text"
    onClick={() => alert('Button clicked')}
  />
);

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 <SecondaryIconButton> additionally accepts any props or attributes specific to the given element or component.
type	union Possible values: 'submit' , 'reset' , 'button'		'button'	Used as the HTML type attribute.
icon	ReactElement			An component.
color	union Possible values: 'solid' , 'primary' , 'info'		'solid'	Indicates the color scheme of the button.
label	string	✅		Should describe what the button does, for accessibility purposes (screen-reader users)
isDisabled	boolean		false	Tells when the button should present a disabled state.
size	union Possible values: TLegacySizes , TSizes		'40'	Indicates the size of the icon. Available sizes are '10', '20', '30', '40'.
onClick	Function See signature.			Handler when the button is clicked.

Signatures

Signature onClick

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

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

Note

The size of the button should be adjusted directly on the passed Icon component. Example:

<SecondaryIconButton
  icon={<ArrowRightIcon size="small" />}
  label="Next"
  onClick={() => alert('Button clicked')}
/>

Examples in the Merchant Center

Mostly in all places where you just need a "clickable" icon, without the complex behaviors of the IconButton.

• Pagination list: Go to next page