@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