@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

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

Button.Close

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

Button.Icon

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

Button.Link

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

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