19.13.0 • Published 8 months ago

@commercetools-uikit/secondary-icon-button v19.13.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 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.13.0

9 months ago

19.12.1

9 months ago

19.11.0

10 months ago

19.12.0

10 months ago

19.10.0

11 months ago

19.8.0

12 months ago

19.6.0

1 year ago

19.4.0

1 year ago

19.7.0

12 months ago

19.5.0

1 year ago

19.9.0

11 months ago

19.3.1

1 year ago

19.3.0

1 year ago

19.2.0

1 year ago

19.1.0

1 year ago

19.0.0

1 year ago

18.5.0

1 year ago

18.4.0

1 year ago

18.3.0

1 year ago

18.2.0

1 year ago

18.1.0

1 year ago

18.0.0

1 year ago

17.1.0

1 year ago

17.0.1

1 year ago

17.0.0

1 year 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

2 years ago

16.2.1

2 years ago

16.2.0

2 years ago

16.1.1

2 years ago

16.1.0

2 years ago

15.15.0

2 years ago

15.15.1

2 years ago

16.0.0

2 years ago

15.13.2

2 years ago

15.14.3

2 years ago

15.14.1

2 years ago

15.14.2

2 years ago

15.14.0

2 years ago

15.13.1

2 years ago

15.13.0

2 years ago

15.12.0

2 years ago

15.9.0

2 years ago

15.10.0

2 years ago

15.11.2

2 years ago

15.11.0

2 years ago

15.11.1

2 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

3 years ago

14.0.2

3 years ago

14.0.6

3 years ago

14.0.0

3 years ago

14.0.1

3 years ago

13.0.4

3 years ago

13.0.2

3 years ago

13.0.0

3 years ago

13.0.1

3 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

4 years ago

12.0.8

4 years ago

12.0.7

4 years ago

12.0.3

4 years ago

12.0.4

4 years ago

12.0.0

4 years ago

11.2.1

4 years ago

11.2.0

4 years ago

11.0.2

4 years ago

11.0.1

4 years ago

10.47.3

4 years ago

10.47.0

4 years ago

10.46.3

4 years ago

10.46.2

4 years ago

10.46.1

4 years ago

10.45.0

4 years ago

10.44.4

4 years ago

10.44.2

4 years ago

10.44.1

4 years ago

10.44.0

4 years ago

10.43.3

4 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

5 years ago

10.21.0

5 years ago

10.18.7-canary.5

5 years ago

10.18.7-canary.6

5 years ago

10.18.7-canary.7

5 years ago

10.18.7-canary.4

5 years ago

10.18.7-canary.3

5 years ago

10.18.7-canary.2

5 years ago

10.18.7-canary.1

5 years ago

10.18.6-canary.1

5 years ago

10.18.7-canary.0

5 years ago

10.18.5-canary.4

5 years ago

10.18.6-canary.0

5 years ago

10.18.5-canary.3

5 years ago

10.18.5-canary.2

5 years ago

10.18.5-canary.1

5 years ago

10.18.5-canary.0

5 years ago

10.18.4

5 years ago

10.18.4-canary.9

5 years ago

10.18.4-canary.8

5 years ago

10.18.4-canary.7

5 years ago

10.18.4-canary.6

5 years ago

10.18.4-canary.3

5 years ago

10.18.4-canary.4

5 years ago

10.18.4-canary.5

5 years ago

10.18.4-canary.1

5 years ago

10.18.4-canary.2

5 years ago

10.18.4-canary.0

5 years ago

10.18.3-canary.2

5 years ago

10.18.3-canary.3

5 years ago

10.18.3-canary.1

5 years ago

10.18.3-canary.0

5 years ago

10.18.2

5 years ago

10.18.2-canary.3

5 years ago

10.18.2-canary.2

5 years ago

10.18.2-canary.1

5 years ago

10.17.1-canary.3

5 years ago

10.17.1-canary.2

5 years ago

10.18.1-canary.0

5 years ago

10.18.2-canary.0

5 years ago

10.18.0

5 years ago

10.17.1-canary.1

5 years ago

10.17.1-canary.0

5 years ago

10.17.0

5 years ago

10.16.1-canary.8

5 years ago

10.16.1-canary.7

5 years ago

10.16.1-canary.5

5 years ago

10.16.1-canary.6

5 years ago

10.16.1-canary.4

5 years ago

10.16.1-canary.3

5 years ago

10.16.1-canary.2

5 years ago

10.16.1-canary.1

5 years ago

10.16.1-canary.0

5 years ago

10.16.0

5 years ago

10.15.2-canary.4

5 years ago

10.15.2-canary.0

5 years ago

10.15.2-canary.2

5 years ago

10.15.2-canary.3

5 years ago

10.15.1

5 years ago

10.15.1-canary.4

5 years ago

10.14.1

5 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