@paprika/button

@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