19.2.0 • Published 13 hours ago

@commercetools-uikit/icon-button v19.2.0

Weekly downloads
21
License
MIT
Repository
github
Last release
13 hours ago

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

PropsTypeRequiredDefaultDescription
asTStringOrComponentYou 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.
typeunionPossible values:'button' , 'reset' , 'submit''button'Used as the HTML type attribute.
labelstringShould describe what the button does, for accessibility purposes (screen-reader users)
iconReactElementan component
isToggleButtonbooleanfalseIf this is active, it means the button will persist in an "active" state when toggled (see isToggled), and back to normal state when untoggled.
isToggledbooleanTells when the button should present a toggled state. It does not have any effect when isToggleButton is false.
isDisabledbooleanTells when the button should present a disabled state.
onClickFunctionSee signature.Handler when the button is clicked
shapeunionPossible 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
themeunionPossible values:'default' , 'primary' , 'info''default'The component may have a theme only if isToggleButton is true
sizeunionPossible values:'small' , 'medium' , 'big''big'Indicates the size of the icon.

Signatures

Signature onClick

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

Examples in the Merchant Center

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

5 days ago

19.1.0

17 days ago

19.0.0

1 month ago

18.5.0

2 months ago

18.4.0

2 months ago

18.3.0

2 months ago

18.2.0

2 months ago

18.1.0

3 months ago

18.0.0

3 months ago

17.1.0

3 months ago

17.0.1

3 months ago

17.0.0

4 months ago

16.12.1

5 months ago

16.12.0

5 months ago

16.5.0

10 months ago

16.6.1

9 months ago

16.6.0

9 months ago

16.4.1

10 months ago

16.9.0

6 months ago

16.7.3

8 months ago

16.7.2

8 months ago

16.7.1

8 months ago

16.7.0

8 months ago

16.7.5

7 months ago

16.7.4

8 months ago

16.8.0

6 months ago

16.11.0

5 months ago

16.10.0

6 months ago

16.4.0

10 months ago

16.3.0

11 months ago

16.2.1

11 months ago

16.2.0

11 months ago

16.1.1

12 months ago

16.1.0

12 months ago

15.15.0

1 year ago

15.15.1

1 year ago

16.0.0

1 year ago

15.13.2

1 year ago

15.14.3

1 year ago

15.14.1

1 year ago

15.14.2

1 year ago

15.14.0

1 year ago

15.13.1

1 year ago

15.13.0

1 year ago

15.12.0

1 year ago

15.9.0

1 year ago

15.10.0

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

15.11.1

1 year ago

15.7.0

1 year ago

15.8.0

1 year ago

15.5.0

1 year ago

15.5.1

1 year ago

15.6.0

1 year ago

15.4.0

1 year ago

15.3.0

2 years ago

15.2.4

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.0

2 years ago

14.0.2

2 years ago

14.0.6

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

13.0.4

2 years ago

13.0.2

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.2.9

2 years ago

12.2.5

2 years ago

12.2.4

3 years ago

12.2.3

3 years ago

12.2.2

3 years ago

12.2.0

3 years ago

12.1.0

3 years ago

12.0.12

3 years ago

12.0.8

3 years ago

12.0.7

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.0

3 years ago

11.2.1

3 years ago

11.2.0

3 years ago

11.0.2

3 years ago

11.0.1

3 years ago

10.47.3

3 years ago

10.47.0

3 years ago

10.46.3

3 years ago

10.46.2

3 years ago

10.46.1

3 years ago

10.45.0

3 years ago

10.44.4

3 years ago

10.44.2

3 years ago

10.44.1

3 years ago

10.44.0

3 years ago

10.43.3

3 years ago

10.43.2

3 years ago

10.42.2

3 years ago

10.42.0

3 years ago

10.42.1

3 years ago

10.41.0

3 years ago

10.40.0

3 years ago

10.39.8

3 years ago

10.39.7

3 years ago

10.39.6

3 years ago

10.39.2

3 years ago

10.39.4

3 years ago

10.39.3

3 years ago

10.39.1

4 years ago

10.36.0

4 years ago

10.35.1

4 years ago

10.30.1

4 years ago

10.27.1

4 years ago

10.27.0

4 years ago

10.24.0

4 years ago

10.22.1

4 years ago

10.21.0

4 years ago

10.18.7-canary.5

4 years ago

10.18.7-canary.6

4 years ago

10.18.7-canary.7

4 years ago

10.18.7-canary.4

4 years ago

10.18.7-canary.3

4 years ago

10.18.7-canary.2

4 years ago

10.18.7-canary.1

4 years ago

10.18.6-canary.1

4 years ago

10.18.7-canary.0

4 years ago

10.18.6-canary.0

4 years ago

10.18.5-canary.4

4 years ago

10.18.5-canary.3

4 years ago

10.18.5-canary.2

4 years ago

10.18.5-canary.1

4 years ago

10.18.5-canary.0

4 years ago

10.18.4

4 years ago

10.18.4-canary.9

4 years ago

10.18.4-canary.8

4 years ago

10.18.4-canary.7

4 years ago

10.18.4-canary.6

4 years ago

10.18.4-canary.3

4 years ago

10.18.4-canary.4

4 years ago

10.18.4-canary.5

4 years ago

10.18.4-canary.1

4 years ago

10.18.4-canary.2

4 years ago

10.18.4-canary.0

4 years ago

10.18.3-canary.2

4 years ago

10.18.3-canary.3

4 years ago

10.18.3-canary.1

4 years ago

10.18.3-canary.0

4 years ago

10.18.2

4 years ago

10.18.2-canary.3

4 years ago

10.18.2-canary.2

4 years ago

10.18.2-canary.1

4 years ago

10.17.1-canary.3

4 years ago

10.17.1-canary.2

4 years ago

10.18.1-canary.0

4 years ago

10.18.2-canary.0

4 years ago

10.18.0

4 years ago

10.17.1-canary.1

4 years ago

10.17.0

4 years ago

10.17.1-canary.0

4 years ago

10.16.1-canary.8

4 years ago

10.16.1-canary.7

4 years ago

10.16.1-canary.6

4 years ago

10.16.1-canary.5

4 years ago

10.16.1-canary.4

4 years ago

10.16.1-canary.3

4 years ago

10.16.1-canary.2

4 years ago

10.16.1-canary.1

4 years ago

10.16.1-canary.0

4 years ago

10.16.0

4 years ago

10.15.2-canary.4

4 years ago

10.15.2-canary.0

4 years ago

10.15.2-canary.2

4 years ago

10.15.2-canary.3

4 years ago

10.15.1-canary.6

4 years ago

10.15.1

4 years ago

10.15.1-canary.4

4 years ago

10.14.1

4 years ago

10.14.1-canary.7

4 years ago

10.13.0

4 years ago

11.0.0-alpha.11

4 years ago

11.0.0-alpha.10

4 years ago

11.0.0-alpha.9

4 years ago

11.0.0-alpha.6

4 years ago

11.0.0-alpha.7

4 years ago

11.0.0-alpha.8

4 years ago

11.0.0-alpha.5

4 years ago

11.0.0-alpha.4

4 years ago

11.0.0-alpha.3

4 years ago

11.0.0-alpha.2

4 years ago

11.0.0-alpha.1

4 years ago

11.0.0-alpha.0

4 years ago