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 React from 'react';
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`	`union` Possible values: `string , ComponentType`			a `ComponentType`. You may pass in a string like "a" to have the button render as an anchor tag instead.
`type`	`union` Possible values: `'submit' , 'reset' , 'button'`		`'button'`	Used as the HTML type attribute.
`icon`	`ReactReactElement`			An component.
`color`	`union` Possible values: `'solid' , 'primary'`		`'solid'`	Sets the color of the icon
`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. This is required if `as` is not defined.

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

@commercetools-uikit/secondary-icon-button

Package Exports

Readme