Icon buttons are icon-only buttons. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.
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
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;
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: 'small' , 'medium' , 'big'
|
'big' |
Indicates the size of the icon. |
(
event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
) => void
- Secondary action example: Delete product
- Minimize effect example: Reordering table