1.1.19 • Published 7 months ago

@paprika/button v1.1.19

Weekly downloads
12,267
License
MIT
Repository
github
Last release
7 months ago

@paprika/button

Description

Button component, for performing an action on the page you’re viewing.

Installation

yarn add @paprika/button

or with npm:

npm install @paprika/button

Props

Button

PropTyperequireddefaultDescription
a11yTextstringfalsenullDescriptive a11y text for assistive technologies. By default, text from children node will be used.
canPropagateboolfalsetrueIf click events are allowed to propagate up the DOM tree.
childrennodefalsenullBody content of the button.
iconnodefalsenullAn icon to be included to the left of children content.
isActiveboolfalsenullIf the button is in an "active" or "selected" state.
isDisabledboolfalsefalseIf the button is disabled.
isDropdownboolfalsefalseIf the button includes a down arrow to the right of children content.
isFullWidthboolfalsefalseIf the width of the button should span it's parent container (100%).
isPendingboolfalsefalseIf the button should render in a pending state (with a spinner icon).
isSemanticboolfalsetrueIf it will be rendered as a element. If false, a will be rendered via an accessible .
isSubmitboolfalsefalseIf the type attribute should "submit", instead of the default "button".
kind Button.types.kind.DEFAULT, Button.types.kind.PRIMARY, Button.types.kind.SECONDARY, Button.types.kind.DESTRUCTIVE, Button.types.kind.FLAT, Button.types.kind.MINOR, Button.types.kind.LINKfalseButton.types.kind.DEFAULTThe visual style of the button.
onClickfuncfalse() => {}Callback to be executed when the button is clicked or activated by keyboard. Typically required.
rolestringfalse"button"Value for role attribute to override the default of "button".
size Button.types.size.SMALL, Button.types.size.MEDIUM, Button.types.size.LARGEfalseButton.types.size.MEDIUMSize of the button (font size, min-height, padding, etc).
tabIndexnumberfalsenullValue for tabindex attribute to override the default of 0.

Button.Close

PropTyperequireddefaultDescription
a11yTextstringfalsenullDescriptive a11y text for assistive technologies. By default, text from children node will be used.
isDarkboolfalsefalseIf the close button will be rendered on a dark background and will use inverted colours.

Button.Icon

PropTyperequireddefaultDescription
childrennodetrue-Body content of the button (an icon).
kind Icon.types.kind.DEFAULT, Icon.types.kind.PRIMARY, Icon.types.kind.SECONDARY, Icon.types.kind.DESTRUCTIVE, Icon.types.kind.FLAT, Icon.types.kind.MINOR, Icon.types.kind.LINKfalseIcon.types.kind.DEFAULTThe visual style of the button.
size Icon.types.size.SMALL, Icon.types.size.MEDIUM, Icon.types.size.LARGEfalseIcon.types.size.MEDIUMSize of the button (font size, min-height, padding, etc).

Button.Link

PropTyperequireddefaultDescription
a11yTextstringfalsenullDescriptive a11y text for assistive technologies. By default, text from children node will be used.
childrennodetrue-Body content of the button.
hrefstringtrue-Url for the link.
iconnodefalsenullAn icon to be included to the left of children content.
isDisabledboolfalsefalseIf the button is disabled.
kind Link.types.kind.DEFAULT, Link.types.kind.PRIMARY, Link.types.kind.SECONDARY, Link.types.kind.DESTRUCTIVE, Link.types.kind.FLAT, Link.types.kind.MINOR, Link.types.kind.LINKfalseLink.types.kind.LINKThe visual style of the button.
size Link.types.size.SMALL, Link.types.size.MEDIUM, Link.types.size.LARGEfalseLink.types.size.MEDIUMSize of the button (font size, min-height, padding, etc).
shouldOpenNewTabboolfalsefalseWhether the link should open a new tab.
suffixIconnodefalseSize of the button (font size, min-height, padding, etc).

Button

The <Button> component is a fully accessible button intended for use typically as a skeuomorphic button, but many visual styles (kinds) are available.

For buttons with a label that is only an icon, the <Button.Icon> component is provided. For typical close buttons, <Button.Close> is provided.

It is rendered as a <button> element by default, but can also be rendered as a generic <span>, via the <RawButton> if global CSS conflicts are an issue (when isSemantic prop is set to false).

Usage

For a basic button

import Button from "@paprika/button";

<Button onClick={clickHandler}>Button label</Button>;

Or an Icon button

import Button from "@paprika/button";
import InfoIcon from "@paprika/icon/lib/InfoCircle";

<Button.Icon onClick={clickHandler}>
  <InfoIcon />
</Button.Icon>;

Or a Close button

import Button from "@paprika/button";

<Button.Close onClick={clickHandler} />;

Links

@babel/runtime-corejs2@paprika/constants@paprika/helpers@paprika/icon@paprika/raw-button@paprika/stylers@paprika/tokensprop-types
@infinitebrahmanuniverse/nolb-_pap@everything-registry/sub-chunk-704@paprika/list-box@paprika/listbox@paprika/modal@paprika/overflow-menu@paprika/panel@paprika/collapsible-text@paprika/confirmation@paprika/copy-input@paprika/data-field@paprika/data-grid@paprika/data-header@paprika/dialog-actions@paprika/dropdown-menu@paprika/filter@paprika/hf-panel@paprika/input@paprika/action-bar@paprika/breadcrumbs@paprika/button-group@paprika/calendar@paprika/collapsible-card@paprika/side-navigation@paprika/sidepanel@paprika/sortable@paprika/status-tracker@paprika/table@paprika/takeover@paprika/toast@paprika/uploader
1.1.19-next.0

7 months ago

1.1.19

7 months ago

1.1.18-next.0

3 years ago

1.1.18

3 years ago

1.1.17-next.0

3 years ago

1.1.17

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.16-next.0

3 years ago

1.1.15-next.0

3 years ago

1.1.14-next.0

4 years ago

1.1.13-next.1

4 years ago

1.1.13-next.0

4 years ago

1.1.14

4 years ago

1.1.13

4 years ago

1.1.12

4 years ago

1.1.12-next.1

4 years ago

1.1.12-next.2

4 years ago

1.1.12-next.0

4 years ago

1.1.11-next.1

4 years ago

1.1.11-next.0

4 years ago

1.1.11

4 years ago

1.1.9

4 years ago

1.1.10

4 years ago

1.1.10-next.0

4 years ago

1.1.9-next.1

4 years ago

1.1.9-next.2

4 years ago

1.1.9-next.3

4 years ago

1.1.9-next.0

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.8-next.0

4 years ago

1.1.7-next.0

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.6-next.0

4 years ago

1.1.5-next.0

4 years ago

1.1.4

4 years ago

1.1.4-next.0

4 years ago

1.1.3

4 years ago

1.1.3-next.0

4 years ago

1.1.2

4 years ago

1.1.2-next.0

4 years ago

1.1.1

4 years ago

1.1.1-next.0

4 years ago

1.1.0

4 years ago

1.1.0-next.0

4 years ago

1.0.10-next.0

4 years ago

1.0.9-next.0

5 years ago

1.0.9-next.1

4 years ago

1.0.9

4 years ago

1.0.10

4 years ago

1.0.8

5 years ago

1.0.8-alpha.2

5 years ago

1.0.8-alpha.0

5 years ago

1.0.8-alpha.1

5 years ago

1.0.7

5 years ago

1.0.7-alpha.0

5 years ago

1.0.6-alpha.0

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.5-alpha.0

5 years ago

1.0.4

5 years ago

1.0.4-alpha.0

5 years ago

1.0.3

5 years ago

1.0.3-alpha.1

5 years ago

1.0.3-alpha.0

5 years ago

1.0.2

5 years ago

1.0.2-alpha.1

5 years ago

1.0.2-alpha.0

5 years ago

1.0.1

5 years ago

1.0.1-alpha.1

5 years ago

1.0.1-alpha.0

5 years ago

1.0.0

5 years ago

0.3.15

5 years ago

0.3.15-alpha.4

5 years ago

0.3.15-alpha.3

5 years ago

0.3.15-alpha.2

5 years ago

0.3.15-alpha.1

5 years ago

0.3.15-alpha.0

5 years ago

0.3.14

5 years ago

0.3.13

5 years ago

0.3.12

5 years ago

0.3.11

5 years ago

0.3.10

5 years ago

0.3.9

5 years ago

0.3.8

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.29

5 years ago

0.2.28

5 years ago

0.2.27

5 years ago

0.2.26

5 years ago

0.2.25

5 years ago

0.2.24

5 years ago

0.2.23

5 years ago

0.2.22

5 years ago

0.2.21

5 years ago

0.2.20

6 years ago

0.2.19

6 years ago

0.2.18

6 years ago

0.2.17

6 years ago

0.2.16

6 years ago

0.2.15

6 years ago

0.2.14

6 years ago

0.2.13

6 years ago

0.2.12

6 years ago

0.2.11

6 years ago

0.2.10

6 years ago

0.2.9

6 years ago

0.2.8

6 years ago

0.2.7

6 years ago

0.2.6

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.17

6 years ago

0.1.16

6 years ago

0.1.15

6 years ago

0.1.14

6 years ago

0.1.13

6 years ago

0.1.12

6 years ago

0.1.11

6 years ago

0.1.10

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago