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 | 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) | | 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 | FunctionSee signature. | | | Handler when the button is clicked | | shape | unionPossible 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 | unionPossible values:'default' , 'primary' , 'info' | | 'default' | The component may have a theme only if isToggleButton is true | | size | unionPossible 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