@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

$3

| Prop | Type | required | default | Description |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| canPropagate | bool | false | true | If click events are allowed to propagate up the DOM tree. |
| children | node | false | null | Body content of the button. |
| icon | node | false | null | An icon to be included to the left of children content. |
| isActive | bool | false | null | If the button is in an "active" or "selected" state. |
| isDisabled | bool | false | false | If the button is disabled. |
| isDropdown | bool | false | false | If the button includes a down arrow to the right of children content. |
| isFullWidth | bool | false | false | If the width of the button should span it's parent container (100%). |
| isPending | bool | false | false | If the button should render in a pending state (with a spinner icon). |
| isSemantic | bool | false | true | If it will be rendered as a element. If false, a will be rendered via an accessible . |
| isSubmit | bool | false | false | If 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.LINK] | false | Button.types.kind.DEFAULT | The visual style of the button. |
| onClick | func | false | () => {} | Callback to be executed when the button is clicked or activated by keyboard. Typically required. |
| role | string | false | "button" | Value for role attribute to override the default of "button". |
| size | [ Button.types.size.SMALL, Button.types.size.MEDIUM, Button.types.size.LARGE] | false | Button.types.size.MEDIUM | Size of the button (font size, min-height, padding, etc). |
| tabIndex | number | false | null | Value for tabindex attribute to override the default of 0. |

$3

| Prop | Type | required | default | Description |
| -------- | ------ | -------- | ------- | --------------------------------------------------------------------------------------------------- |
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| isDark | bool | false | false | If the close button will be rendered on a dark background and will use inverted colours. |

$3

| Prop | Type | required | default | Description |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | --------------------------------------------------------- |
| children | node | true | - | 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.LINK] | false | Icon.types.kind.DEFAULT | The visual style of the button. |
| size | [ Icon.types.size.SMALL, Icon.types.size.MEDIUM, Icon.types.size.LARGE] | false | Icon.types.size.MEDIUM | Size of the button (font size, min-height, padding, etc). |

$3

| Prop | Type | required | default | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ---------------------- | --------------------------------------------------------------------------------------------------- |
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| children | node | true | - | Body content of the button. |
| href | string | true | - | Url for the link. |
| icon | node | false | null | An icon to be included to the left of children content. |
| isDisabled | bool | false | false | If 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.LINK] | false | Link.types.kind.LINK | The visual style of the button. |
| size | [ Link.types.size.SMALL, Link.types.size.MEDIUM, Link.types.size.LARGE] | false | Link.types.size.MEDIUM | Size of the button (font size, min-height, padding, etc). |
| shouldOpenNewTab | bool | false | false | Whether the link should open a new tab. |
| suffixIcon | node | false | | Size of the button (font size, min-height, padding, etc). |

Button

The

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 component is provided. For typical close buttons, is provided.

It is rendered as a

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

$3

For a basic button

`jsx
import Button from "@paprika/button";

Button label;
`

Or an Icon button

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



;
`

Or a Close button

`jsx
import Button from "@paprika/button";

;
``

Links

- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG