@commercetools-uikit/icon-button

IconButton

Description

Icon buttons are icon-only buttons. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.

Installation

yarn add @commercetools-uikit/icon-button

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

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

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

const Example = () => (
  <IconButton
    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 <IconButton> 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)
icon	ReactElement			an component
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
shape	union Possible values: 'round' , 'square'		'round'	@deprecated This prop is only used in the old theme. For the new theme this prop will not be taken into account and square is used by default
theme	union Possible values: 'default' , 'primary' , 'info'		'default'	The component may have a theme only if isToggleButton is true
size	union Possible values: TLegacySizes , TSizes		'40'	Indicates the size of the icon. Available sizes are '10', '20', '30', '40'.

Signatures

Signature onClick

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

Examples in the Merchant Center

• Secondary action example: Delete product
• Minimize effect example: Reordering table