20.0.0 • Published 6 months ago

@commercetools-uikit/secondary-icon-button v20.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

SecondaryIconButton

Description

Secondary Icon Buttons are "icon-only" buttons and a restricted version of the `\`. 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

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 <SecondaryIconButton> additionally accepts any props or attributes specific to the given element or component.
typeunionPossible values:'submit' , 'reset' , 'button''button'Used as the HTML type attribute.
iconReactElementAn component.
colorunionPossible values:'solid' , 'primary' , 'info''solid'Indicates the color scheme of the button.
labelstringShould describe what the button does, for accessibility purposes (screen-reader users)
isDisabledbooleanfalseTells when the button should present a disabled state.
sizeunionPossible values:TLegacySizes , TSizes'40'Indicates the size of the icon. Available sizes are '10', '20', '30', '40'.
onClickFunctionSee signature.Handler when the button is clicked.

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
19.21.0

11 months ago

19.19.0

1 year ago

19.17.1

1 year ago

19.17.0

1 year ago

19.15.0

1 year ago

19.26.0

7 months ago

19.24.0

8 months ago

19.22.2

11 months ago

19.22.3

10 months ago

19.22.0

11 months ago

19.22.1

11 months ago

19.22.6

10 months ago

19.22.7

10 months ago

19.22.4

10 months ago

19.22.5

10 months ago

19.20.0

1 year ago

19.20.1

1 year ago

20.0.0

7 months ago

19.18.0

1 year ago

19.16.0

1 year ago

19.14.0

1 year ago

19.25.0

8 months ago

19.25.1

8 months ago

19.23.0

8 months ago

19.13.0

1 year ago

19.12.1

1 year ago

19.11.0

1 year ago

19.12.0

1 year ago

19.10.0

1 year ago

19.8.0

1 year ago

19.6.0

1 year ago

19.4.0

2 years ago

19.7.0

1 year ago

19.5.0

2 years ago

19.9.0

1 year ago

19.3.1

2 years ago

19.3.0

2 years ago

19.2.0

2 years ago

19.1.0

2 years ago

19.0.0

2 years ago

18.5.0

2 years ago

18.4.0

2 years ago

18.3.0

2 years ago

18.2.0

2 years ago

18.1.0

2 years ago

18.0.0

2 years ago

17.1.0

2 years ago

17.0.1

2 years ago

17.0.0

2 years ago

16.12.1

2 years ago

16.12.0

2 years ago

16.5.0

2 years ago

16.6.1

2 years ago

16.6.0

2 years ago

16.4.1

2 years ago

16.9.0

2 years ago

16.7.3

2 years ago

16.7.2

2 years ago

16.7.1

2 years ago

16.7.0

2 years ago

16.7.5

2 years ago

16.7.4

2 years ago

16.8.0

2 years ago

16.11.0

2 years ago

16.10.0

2 years ago

16.4.0

2 years ago

16.3.0

3 years ago

16.2.1

3 years ago

16.2.0

3 years ago

16.1.1

3 years ago

16.1.0

3 years ago

15.15.0

3 years ago

15.15.1

3 years ago

16.0.0

3 years ago

15.13.2

3 years ago

15.14.3

3 years ago

15.14.1

3 years ago

15.14.2

3 years ago

15.14.0

3 years ago

15.13.1

3 years ago

15.13.0

3 years ago

15.12.0

3 years ago

15.9.0

3 years ago

15.10.0

3 years ago

15.11.2

3 years ago

15.11.0

3 years ago

15.11.1

3 years ago

15.7.0

3 years ago

15.8.0

3 years ago

15.5.0

3 years ago

15.5.1

3 years ago

15.6.0

3 years ago

15.4.0

3 years ago

15.3.0

3 years ago

15.2.4

3 years ago

15.2.1

3 years ago

15.2.2

3 years ago

15.2.3

3 years ago

15.1.1

3 years ago

15.1.2

3 years ago

15.1.0

3 years ago

15.2.0

3 years ago

15.0.0

4 years ago

14.0.2

4 years ago

14.0.6

4 years ago

14.0.0

4 years ago

14.0.1

4 years ago

13.0.4

4 years ago

13.0.2

4 years ago

13.0.0

4 years ago

13.0.1

4 years ago

12.2.9

4 years ago

12.2.5

4 years ago

12.2.4

4 years ago

12.2.3

4 years ago

12.2.2

4 years ago

12.2.1

4 years ago

12.2.0

4 years ago

12.1.0

4 years ago

12.0.12

5 years ago

12.0.8

5 years ago

12.0.7

5 years ago

12.0.3

5 years ago

12.0.4

5 years ago

12.0.0

5 years ago

11.2.1

5 years ago

11.2.0

5 years ago

11.0.2

5 years ago

11.0.1

5 years ago

10.47.3

5 years ago

10.47.0

5 years ago

10.46.3

5 years ago

10.46.2

5 years ago

10.46.1

5 years ago

10.45.0

5 years ago

10.44.4

5 years ago

10.44.2

5 years ago

10.44.1

5 years ago

10.44.0

5 years ago

10.43.3

5 years ago

10.43.2

5 years ago

10.42.2

5 years ago

10.42.0

5 years ago

10.42.1

5 years ago

10.41.0

5 years ago

10.40.0

5 years ago

10.39.8

5 years ago

10.39.7

5 years ago

10.39.6

5 years ago

10.39.4

5 years ago

10.39.3

5 years ago

10.39.2

5 years ago

10.39.1

5 years ago

10.36.0

5 years ago

10.35.1

5 years ago

10.30.1

5 years ago

10.27.1

5 years ago

10.27.0

5 years ago

10.24.0

5 years ago

10.22.1

6 years ago

10.21.0

6 years ago

10.18.7-canary.5

6 years ago

10.18.7-canary.6

6 years ago

10.18.7-canary.7

6 years ago

10.18.7-canary.4

6 years ago

10.18.7-canary.3

6 years ago

10.18.7-canary.2

6 years ago

10.18.7-canary.1

6 years ago

10.18.6-canary.1

6 years ago

10.18.7-canary.0

6 years ago

10.18.5-canary.4

6 years ago

10.18.6-canary.0

6 years ago

10.18.5-canary.3

6 years ago

10.18.5-canary.2

6 years ago

10.18.5-canary.1

6 years ago

10.18.5-canary.0

6 years ago

10.18.4

6 years ago

10.18.4-canary.9

6 years ago

10.18.4-canary.8

6 years ago

10.18.4-canary.7

6 years ago

10.18.4-canary.6

6 years ago

10.18.4-canary.3

6 years ago

10.18.4-canary.4

6 years ago

10.18.4-canary.5

6 years ago

10.18.4-canary.1

6 years ago

10.18.4-canary.2

6 years ago

10.18.4-canary.0

6 years ago

10.18.3-canary.2

6 years ago

10.18.3-canary.3

6 years ago

10.18.3-canary.1

6 years ago

10.18.3-canary.0

6 years ago

10.18.2

6 years ago

10.18.2-canary.3

6 years ago

10.18.2-canary.2

6 years ago

10.18.2-canary.1

6 years ago

10.17.1-canary.3

6 years ago

10.17.1-canary.2

6 years ago

10.18.1-canary.0

6 years ago

10.18.2-canary.0

6 years ago

10.18.0

6 years ago

10.17.1-canary.1

6 years ago

10.17.1-canary.0

6 years ago

10.17.0

6 years ago

10.16.1-canary.8

6 years ago

10.16.1-canary.7

6 years ago

10.16.1-canary.5

6 years ago

10.16.1-canary.6

6 years ago

10.16.1-canary.4

6 years ago

10.16.1-canary.3

6 years ago

10.16.1-canary.2

6 years ago

10.16.1-canary.1

6 years ago

10.16.1-canary.0

6 years ago

10.16.0

6 years ago

10.15.2-canary.4

6 years ago

10.15.2-canary.0

6 years ago

10.15.2-canary.2

6 years ago

10.15.2-canary.3

6 years ago

10.15.1

6 years ago

10.15.1-canary.4

6 years ago

10.14.1

6 years ago

10.14.1-canary.7

6 years ago

10.13.0

6 years ago

11.0.0-alpha.11

6 years ago

11.0.0-alpha.10

6 years ago

11.0.0-alpha.9

6 years ago

11.0.0-alpha.6

6 years ago

11.0.0-alpha.7

6 years ago

11.0.0-alpha.8

6 years ago

11.0.0-alpha.5

6 years ago

11.0.0-alpha.4

6 years ago

11.0.0-alpha.3

6 years ago

11.0.0-alpha.2

6 years ago

11.0.0-alpha.1

6 years ago

11.0.0-alpha.0

6 years ago