README

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'`		`'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.
`onClick`	`Function` See signature.			Handler when the button is clicked. Signature: (event: MouseEvent<HTMLButtonElement) => void

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

Usage no npm install needed!