20.0.0 • Published 7 months ago

@commercetools-uikit/flat-button v20.0.0

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

FlatButton

Description

Flat buttons are minimal and a flat variation of primary and secondary buttons.

Installation

yarn add @commercetools-uikit/flat-button
npm --save install @commercetools-uikit/flat-button

Additionally install the peer dependencies (if not present)

yarn add react
npm --save install react

Usage

import FlatButton from '@commercetools-uikit/flat-button';
import { InformationIcon } from '@commercetools-uikit/icons';

const Example = () => (
  <FlatButton
    tone="primary"
    icon={<InformationIcon />}
    label="A label text"
    onClick={() => alert('Button clicked')}
    isDisabled={false}
  />
);

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 <FlatButton> additionally accepts any props or attributes specific to the given element or component.
toneunionPossible values:'primary' , 'secondary' , 'inverted' , 'critical''primary'Indicates the color scheme of the button.
typeunionPossible values:'submit' , 'reset' , 'button''button'Used as the HTML type attribute.
labelstringShould describe what the button is for.
onClickFunctionSee signature.Handler when the button is clicked.
iconReactElementThe icon of the button.
iconPositionunionPossible values:'left' , 'right''left'The position of the icon.
isDisabledbooleanfalseDetermines if the button is disabled. Note that this influences the tone and onClick will not be triggered in this state.

Signatures

Signature onClick

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

Where to use

Main Functions and use cases are:

  • Secondary or primary action example: clear filters
  • Expand/Collapse list of fields example: product attributes
19.21.0

12 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

11 months ago

19.22.0

12 months ago

19.22.1

11 months ago

19.22.6

10 months ago

19.22.7

10 months ago

19.22.4

11 months ago

19.22.5

11 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

2 years 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

3 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

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.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.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.7-canary.0

6 years ago

10.18.6-canary.1

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.2

6 years ago

10.15.2-canary.3

6 years ago

10.15.2-canary.0

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