@paprika/confirmation

Description

Confirmation component allows user to confirm or cancel action

Installation

yarn add @paprika/confirmation

or with npm:

npm install @paprika/confirmation

Props

Confirmation

Prop	Type	required	default	Description
body	node	false	null	Content of the popover confirmation
buttonSize	[ Confirmation.types.size.SMALL, Confirmation.types.size.MEDIUM, Confirmation.types.size.LARGE]	false	Confirmation.types.size.MEDIUM	Size of the button
children	node	false	null
confirmButtonType	[ Confirmation.types.kind.PRIMARY, Confirmation.types.kind.DESTRUCTIVE]	false	Confirmation.types.kind.DESTRUCTIVE	Determine the styling of the confirm button
confirmLabel	string	true	-	Label for the confirm button
customCancelLabel	string	false	null	Custom label for the cancel button
defaultIsOpen	bool	false	false	If the popover is open by default
heading	string	false	null	Heading for the popover confirmation
isPending	bool	false	false	If the confirm button should render in a pending state (with a spinner icon)
onClose	func	false	() => {}	Callback when cancel button is clicked
onConfirm	func	true	-	Callback when confirm button is clicked

Usage

import Confirmation from "@paprika/confirmation";

<Confirmation
  confirmLabel="Delete filter"
  body="Lorem ipsum dolor amet vexillologist tacos selvage narwhal butcher twee ethical hot chicken"
  onConfirm={handleCloseConfirm => handleConfirm(handleCloseConfirm)}
  onClose={handleClose}
  heading="Delete filter?">
    <Confirmation.TriggerButton>Trigger</Confirmation.TriggerButton>
  </Confirmation>
;

or

<Confirmation
  confirmLabel="Delete filter"
  body="Lorem ipsum dolor amet vexillologist tacos selvage narwhal butcher twee ethical hot chicken"
  defaultIsOpen
  onConfirm={handleCloseConfirm => handleConfirm(handleCloseConfirm)}
  heading="Delete filter?"
/>;

Components

You can use the following components to compose the Confirmation:

<Confirmation.TriggerButton>

Links

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