7.1.2 • Published 3 years ago

bpk-component-button v7.1.2

Weekly downloads
996
License
Apache-2.0
Repository
github
Last release
3 years ago

bpk-component-button

Backpack button component.

Installation

npm install bpk-component-button --save-dev

Usage

import React from 'react';
import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
import ArrowIcon from 'bpk-component-icon/sm/long-arrow-right';
import BpkButton from 'bpk-component-button';

const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));

export default () => (
  <div>
    <BpkButton>Primary</BpkButton>
    <BpkButton large>Large primary</BpkButton>
    <BpkButton secondary>Secondary</BpkButton>
    <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
    <BpkButton link>Link</BpkButton>
    <BpkButton linkOnDark>LinkOnDark</BpkButton>
    <BpkButton outline>Outline (Deprecated, use PrimaryOnDark or PrimaryOnLight instead)</BpkButton>
    <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
    <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
    <BpkButton iconOnly>
      <AlignedArrowIcon />
      <span className="visually-hidden">Search</span>
    </BpkButton>
  </div>
);

Props

PropertyPropTypeRequiredDefault Value
children-true-
destructiveboolfalsefalse
featuredboolfalsefalse
linkboolfalsefalse
linkOnDarkboolfalsefalse
outlinebool (deprecated)falsefalse
secondaryboolfalsefalse
secondaryOnDarkboolfalsefalse
primaryOnDarkboolfalsefalse
primaryOnLightboolfalsefalse
blankboolfalsefalse
classNamestringfalsenull
disabledboolfalsefalse
hrefstringfalsenull
iconOnlyboolfalsefalse
largeboolfalsefalse
onClickfuncfalsenull
relstringfalsenull
submitboolfalsefalse

Theme Props

Primary:

  • buttonPrimaryTextColor
  • buttonPrimaryHoverTextColor
  • buttonPrimaryActiveTextColor
  • buttonPrimaryGradientStartColor
  • buttonPrimaryGradientEndColor
  • buttonPrimaryBackgroundColor
  • buttonPrimaryHoverBackgroundColor
  • buttonPrimaryActiveBackgroundColor

Primary on dark:

  • buttonPrimaryOnDarkTextColor
  • buttonPrimaryOnDarkHoverTextColor
  • buttonPrimaryOnDarkActiveTextColor
  • buttonPrimaryOnDarkBackgroundColor
  • buttonPrimaryOnDarkHoverBackgroundColor
  • buttonPrimaryOnDarkActiveBackgroundColor

Primary on light:

  • buttonPrimaryOnLightTextColor
  • buttonPrimaryOnLightHoverTextColor
  • buttonPrimaryOnLightActiveTextColor
  • buttonPrimaryOnLightBackgroundColor
  • buttonPrimaryOnLightHoverBackgroundColor
  • buttonPrimaryOnLightActiveBackgroundColor

Secondary:

  • buttonSecondaryTextColor
  • buttonSecondaryHoverTextColor
  • buttonSecondaryActiveTextColor
  • buttonSecondaryBorderColor
  • buttonSecondaryHoverBorderColor
  • buttonSecondaryActiveBorderColor
  • buttonSecondaryBackgroundColor
  • buttonSecondaryHoverBackgroundColor
  • buttonSecondaryActiveBackgroundColor

Secondary on dark:

  • buttonSecondaryOnDarkTextColor
  • buttonSecondaryOnDarkHoverTextColor
  • buttonSecondaryOnDarkActiveTextColor
  • buttonSecondaryOnDarkBackgroundColor
  • buttonSecondaryOnDarkHoverBackgroundColor
  • buttonSecondaryOnDarkActiveBackgroundColor

Featured:

  • buttonFeaturedTextColor
  • buttonFeaturedHoverTextColor
  • buttonFeaturedActiveTextColor
  • buttonFeaturedGradientStartColor
  • buttonFeaturedGradientEndColor
  • buttonFeaturedBackgroundColor
  • buttonFeaturedHoverBackgroundColor
  • buttonFeaturedActiveBackgroundColor

Destructive:

  • buttonDestructiveTextColor
  • buttonDestructiveHoverTextColor
  • buttonDestructiveActiveTextColor
  • buttonDestructiveBorderColor
  • buttonDestructiveHoverBorderColor
  • buttonDestructiveActiveBorderColor
  • buttonDestructiveBackgroundColor
  • buttonDestructiveHoverBackgroundColor
  • buttonDestructiveActiveBackgroundColor

All button types:

  • buttonFontSize (Optional)
7.0.6

3 years ago

7.0.5

3 years ago

7.1.2

3 years ago

7.1.1

3 years ago

7.1.0

3 years ago

6.2.7

3 years ago

6.2.6

3 years ago

6.2.9

3 years ago

6.2.8

3 years ago

7.0.0

3 years ago

7.0.4

3 years ago

7.0.3

3 years ago

7.0.2

3 years ago

7.0.1

3 years ago

6.2.5

3 years ago

6.2.4

3 years ago

6.2.3

3 years ago

6.2.2

3 years ago

6.2.1

3 years ago

6.2.0

3 years ago

5.1.1

3 years ago

6.0.1

3 years ago

6.0.0

3 years ago

6.1.0

3 years ago

5.0.20

4 years ago

5.0.21

3 years ago

5.0.22

3 years ago

5.0.23

3 years ago

5.0.24

3 years ago

5.0.25

3 years ago

5.0.26

3 years ago

5.0.27

3 years ago

5.0.28

3 years ago

5.0.29

3 years ago

5.0.15

4 years ago

5.0.16

4 years ago

5.0.17

4 years ago

5.0.18

4 years ago

5.0.19

4 years ago

5.1.0

3 years ago

5.0.13

4 years ago

5.0.14

4 years ago

5.0.12

4 years ago

5.0.11

4 years ago

5.0.10

4 years ago

5.0.9

4 years ago

5.0.8

4 years ago

5.0.7

4 years ago

5.0.6

4 years ago

5.0.5

4 years ago

5.0.4

4 years ago

5.0.3

4 years ago

5.0.2

4 years ago

5.0.1

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.4.7

4 years ago

3.4.5

4 years ago

3.4.4

4 years ago

3.4.3

4 years ago

3.4.2

4 years ago

3.4.1

4 years ago

3.4.0

4 years ago

3.3.32

4 years ago

3.3.33

4 years ago

3.3.31

4 years ago

3.3.30

4 years ago

3.3.29

4 years ago

3.3.26

4 years ago

3.3.27

4 years ago

3.3.28

4 years ago

3.3.25

4 years ago

3.3.24

4 years ago

3.3.23

4 years ago

3.3.22

4 years ago

3.3.20

4 years ago

3.3.21

4 years ago

3.3.19

4 years ago

3.3.18

4 years ago

3.3.17

4 years ago

3.3.15

4 years ago

3.3.16

4 years ago

3.3.14

4 years ago

3.3.13

4 years ago

3.3.12

4 years ago

3.3.11

4 years ago

3.3.10

5 years ago

3.3.9

5 years ago

3.3.8

5 years ago

3.3.7

5 years ago

3.3.6

5 years ago

3.3.5

5 years ago

3.3.4

5 years ago

3.3.3

5 years ago

3.3.2

5 years ago

3.3.1

5 years ago

3.3.0

5 years ago

3.2.67

5 years ago

3.2.66

5 years ago

3.2.65

5 years ago

3.2.64

5 years ago

3.2.63

5 years ago

3.2.62

5 years ago

3.2.61

5 years ago

3.2.60

5 years ago

3.2.59

5 years ago

3.2.57

5 years ago

3.2.58

5 years ago

3.2.56

5 years ago

3.2.55

5 years ago

3.2.54

5 years ago

3.2.53

5 years ago

3.2.51

5 years ago

3.2.52

5 years ago

3.2.50

5 years ago

3.2.49

5 years ago

3.2.48

5 years ago

3.2.47

5 years ago

3.2.46

5 years ago

3.2.45

5 years ago

3.2.44

5 years ago

3.2.43-css.0

5 years ago

3.2.43

5 years ago

3.2.42

5 years ago

3.2.41-css.0

5 years ago

3.2.42-css.0

5 years ago

3.2.41

5 years ago

3.2.40

5 years ago

3.2.40-css.0

5 years ago

3.2.39

5 years ago

3.2.39-css.0

5 years ago

3.2.38

5 years ago

3.2.38-css.0

5 years ago

3.2.37

5 years ago

3.2.37-css.0

5 years ago

3.2.36

5 years ago

3.2.36-css.0

5 years ago

3.2.35-css.0

5 years ago

3.2.35

5 years ago

3.2.34-css.0

5 years ago

3.2.34

5 years ago

3.2.33

5 years ago

3.2.33-css.0

5 years ago

3.2.32-css.0

5 years ago

3.2.32

5 years ago

3.2.31-css.0

5 years ago

3.2.31

5 years ago

3.2.30

5 years ago

3.2.30-css.0

5 years ago

3.2.29

5 years ago

3.2.28-css.0

5 years ago

3.2.29-css.0

5 years ago

3.2.28

5 years ago

3.2.27

5 years ago

3.2.27-css.0

5 years ago

3.2.26

5 years ago

3.2.26-css.0

5 years ago

3.2.25

5 years ago

3.2.25-css.0

5 years ago

3.2.24

5 years ago

3.2.24-css.0

5 years ago

3.2.23

5 years ago

3.2.23-css.0

5 years ago

3.2.22

5 years ago

3.2.22-css.0

5 years ago

3.2.20

5 years ago

3.2.21

5 years ago

3.2.19

5 years ago

3.2.19-css.0

5 years ago

3.2.18

5 years ago

3.2.18-css.0

5 years ago

3.2.17

5 years ago

3.2.17-css.0

5 years ago

3.2.16

5 years ago

3.2.16-css.0

5 years ago

3.2.15

5 years ago

3.2.15-css.0

5 years ago

3.2.14

5 years ago

3.2.14-css.0

5 years ago

3.2.13

5 years ago

3.2.13-css.0

5 years ago

3.2.12-css.0

5 years ago

3.2.12

5 years ago

3.2.11

5 years ago

3.2.11-css.0

5 years ago

3.2.10

5 years ago

3.2.10-css.0

5 years ago

3.2.9

5 years ago

3.2.9-css.0

5 years ago

3.2.8

5 years ago

3.2.7

5 years ago

3.2.6-css.0

5 years ago

3.2.6

5 years ago

3.2.5

5 years ago

3.2.5-css.0

5 years ago

3.2.4

5 years ago

3.2.4-css.0

5 years ago

3.2.3

5 years ago

3.2.3-css.0

5 years ago

3.2.2-css.0

5 years ago

3.2.2

5 years ago

3.2.1

6 years ago

3.2.1-css.0

6 years ago

3.2.0

6 years ago

3.2.0-css.0

6 years ago

3.1.12-css.0

6 years ago

3.1.12

6 years ago

3.1.11-css.0

6 years ago

3.1.11

6 years ago

3.1.10

6 years ago

3.1.10-css.0

6 years ago

3.1.9-css.0

6 years ago

3.1.9

6 years ago

3.1.8-css.0

6 years ago

3.1.8

6 years ago

3.1.7-css.0

6 years ago

3.1.7

6 years ago

3.1.6-css.0

6 years ago

3.1.6

6 years ago

3.1.4-css.0

6 years ago

3.1.4

6 years ago

3.1.3-css.0

6 years ago

3.1.3

6 years ago

3.1.2-css.0

6 years ago

3.1.2

6 years ago

3.1.1-css.0

6 years ago

3.1.1

6 years ago

3.1.0-css.0

6 years ago

3.1.0

6 years ago

3.0.8-css.0

6 years ago

3.0.8

6 years ago

3.0.7-css.0

6 years ago

3.0.7

6 years ago

3.0.6-css.0

6 years ago

3.0.6

6 years ago

3.0.5

6 years ago

3.0.4

6 years ago

3.0.4-beta.25

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.1-alpha.27

6 years ago

3.0.0

6 years ago

2.6.3

6 years ago

2.6.2

6 years ago

2.6.2-alpha.2

6 years ago

2.6.1

6 years ago

2.6.0

6 years ago

2.5.15

6 years ago

2.5.14

6 years ago

2.5.13

6 years ago

2.5.12

6 years ago

2.5.11

6 years ago

2.5.10

6 years ago

2.5.9

6 years ago

2.5.8

6 years ago

2.5.7

6 years ago

2.5.6

6 years ago

2.5.6-alpha.1

6 years ago

2.5.5

6 years ago

2.5.4

6 years ago

2.5.3

6 years ago

2.5.2

6 years ago

2.5.1

6 years ago

2.5.0

6 years ago

2.4.10-beta.2

6 years ago

2.4.9

6 years ago

2.4.8

6 years ago

2.4.7

6 years ago

2.4.6

6 years ago

2.4.5

6 years ago

2.4.4

6 years ago

2.4.3

6 years ago

2.4.2

6 years ago

2.4.1

6 years ago

2.3.16-alpha.1

6 years ago

2.3.15

6 years ago

2.3.14

6 years ago

2.3.12-alpha.41

6 years ago

2.3.13

6 years ago

2.3.12

6 years ago

2.3.12-alpha.37

6 years ago

2.3.12-alpha.18

6 years ago

2.3.12-alpha.9

6 years ago

2.3.11

6 years ago

2.3.10

6 years ago

2.3.9

6 years ago

2.3.8

6 years ago

2.3.7

6 years ago

2.3.6

6 years ago

2.3.6-alpha.1

6 years ago

2.3.5

6 years ago

2.3.4

6 years ago

2.3.3

6 years ago

2.3.2

6 years ago

2.3.1

6 years ago

2.3.1-alpha.1

6 years ago

2.3.0

6 years ago

2.2.1-alpha.9

6 years ago

2.2.0

6 years ago

2.1.58-alpha.19

6 years ago

2.1.58

6 years ago

2.1.57

6 years ago

2.1.56

6 years ago

2.1.55

6 years ago

2.1.54

6 years ago

2.1.53

6 years ago

2.1.52

6 years ago

2.1.51

6 years ago

2.1.50

6 years ago

2.1.50-alpha.1

6 years ago

2.1.49

6 years ago

2.1.48

6 years ago

2.1.48-alpha.1

6 years ago

2.1.47

6 years ago

2.1.46

6 years ago

2.1.45

6 years ago

2.1.44

6 years ago

2.1.43

6 years ago

2.1.42

6 years ago

2.1.41

6 years ago

2.1.40

6 years ago

2.1.40-alpha.5

7 years ago

2.1.39

7 years ago

2.1.38

7 years ago

2.1.37

7 years ago

2.1.36

7 years ago

2.1.35

7 years ago

2.1.34

7 years ago

2.1.33

7 years ago

2.1.33-alpha.3

7 years ago

2.1.33-alpha.2

7 years ago

2.1.32

7 years ago

2.1.32-beta.1

7 years ago

2.1.31

7 years ago

2.1.30

7 years ago

2.1.29

7 years ago

2.1.28

7 years ago

2.1.27

7 years ago

2.1.26

7 years ago

2.1.25

7 years ago

2.1.24-alpha.12

7 years ago

2.1.23

7 years ago

2.1.22

7 years ago

2.1.21

7 years ago

2.1.20

7 years ago

2.1.20-alpha.2

7 years ago

2.1.19

7 years ago

2.1.18

7 years ago

2.1.17

7 years ago

2.1.16

7 years ago

2.1.15

7 years ago

2.1.14

7 years ago

2.1.13

7 years ago

2.1.12

7 years ago

2.1.11

7 years ago

2.1.10

7 years ago

2.1.9

7 years ago

2.1.8

7 years ago

2.1.7

7 years ago

2.1.6

7 years ago

2.1.5

7 years ago

2.1.4

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.21

7 years ago

2.0.20

7 years ago

2.0.19

7 years ago

2.0.18

7 years ago

2.0.17

7 years ago

2.0.16

7 years ago

2.0.15

7 years ago

2.0.14

7 years ago

2.0.13

7 years ago

2.0.12

7 years ago

2.0.11

7 years ago

2.0.10

7 years ago

2.0.9

7 years ago

2.0.8

7 years ago

2.0.7

7 years ago

2.0.6

7 years ago

2.0.5

7 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.6.83

7 years ago

1.6.82

8 years ago

1.6.81

8 years ago

1.6.80

8 years ago

1.6.79

8 years ago

1.6.78

8 years ago

1.6.77

8 years ago

1.6.76

8 years ago

1.6.75

8 years ago

1.6.74

8 years ago

1.6.73

8 years ago

1.6.72

8 years ago

1.6.71

8 years ago

1.6.70

8 years ago

1.6.69

8 years ago

1.6.68

8 years ago

1.6.67

8 years ago

1.6.66

8 years ago

1.6.65

8 years ago

1.6.64

8 years ago

1.6.63

8 years ago

1.6.62

8 years ago

1.6.61

8 years ago

1.6.60

8 years ago

1.6.59

8 years ago

1.6.58

8 years ago

1.6.57

8 years ago

1.6.56

8 years ago

1.6.55

8 years ago

1.6.53

8 years ago

1.6.51

8 years ago

1.6.50

8 years ago

1.6.49

8 years ago

1.6.48

8 years ago

1.6.47

8 years ago

1.6.46

8 years ago

1.6.45

8 years ago

1.6.44

8 years ago

1.6.43

8 years ago

1.6.42

8 years ago

1.6.41

8 years ago

1.6.40

8 years ago

1.6.39

8 years ago

1.6.38

8 years ago

1.6.37

8 years ago

1.6.36

8 years ago

1.6.35

8 years ago

1.6.34

8 years ago

1.6.33

8 years ago

1.6.32

8 years ago

1.6.31

8 years ago

1.6.30

8 years ago

1.6.29

8 years ago

1.6.28

8 years ago

1.6.27

8 years ago

1.6.26

8 years ago

1.6.25

8 years ago

1.6.24

8 years ago

1.6.23

8 years ago

1.6.22

8 years ago

1.6.21

8 years ago

1.6.20

8 years ago

1.6.19

8 years ago

1.6.18

8 years ago

1.6.17

8 years ago

1.6.16

8 years ago

1.6.15

8 years ago

1.6.14

8 years ago

1.6.13

8 years ago

1.6.12

8 years ago

1.6.11

8 years ago

1.6.10

8 years ago

1.6.9

8 years ago

1.6.8

8 years ago

1.6.7

8 years ago

1.6.6

8 years ago

1.6.5

8 years ago

1.6.4

8 years ago

1.6.3

8 years ago

1.6.2

8 years ago

1.6.1

8 years ago

1.6.0

8 years ago

1.5.22

8 years ago

1.5.21

8 years ago

1.5.20

8 years ago

1.5.19

8 years ago

1.5.18

8 years ago

1.5.17

8 years ago

1.5.16

8 years ago

1.5.15

8 years ago

1.5.14

8 years ago

1.5.13

8 years ago

1.5.12

8 years ago

1.5.11

8 years ago

1.5.10

8 years ago

1.5.9

8 years ago

1.5.8

8 years ago

1.5.7

8 years ago

1.5.6

8 years ago

1.5.5

8 years ago

1.5.4

8 years ago

1.5.3

8 years ago

1.5.2

8 years ago

1.5.1

8 years ago

1.5.0

9 years ago

1.4.4

9 years ago

1.4.3

9 years ago

1.4.2

9 years ago

1.4.1

9 years ago

1.4.0

9 years ago

1.3.0

9 years ago

1.2.4

9 years ago

1.2.3

9 years ago

1.2.2

9 years ago

1.2.1

9 years ago

1.2.0

9 years ago

1.1.7

9 years ago

1.1.6

9 years ago

1.1.5

9 years ago

1.1.4

9 years ago

1.1.3

9 years ago

1.1.2

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.24

9 years ago

1.0.23

9 years ago

1.0.22

9 years ago

1.0.21

9 years ago

1.0.20

9 years ago

1.0.19

9 years ago

1.0.18

9 years ago

1.0.17

9 years ago

1.0.16

9 years ago

1.0.15

9 years ago

1.0.14

9 years ago

1.0.13

9 years ago

1.0.12

9 years ago

1.0.11

9 years ago

1.0.10

9 years ago

1.0.9

9 years ago

1.0.8

9 years ago

1.0.7

9 years ago

1.0.6

9 years ago

1.0.5

9 years ago

1.0.4

9 years ago

1.0.3

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.0.19

9 years ago

0.0.18

9 years ago

0.0.17

9 years ago

0.0.16

9 years ago

0.0.15

9 years ago

0.0.14

9 years ago

0.0.13

9 years ago

0.0.12

9 years ago

0.0.11

9 years ago

0.0.10

9 years ago

0.0.9

9 years ago

0.0.8

9 years ago

0.0.7

9 years ago

0.0.6

9 years ago

0.0.5

9 years ago

0.0.4

9 years ago

0.0.3

9 years ago

0.0.2

9 years ago

0.0.1

9 years ago