@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

$3

| 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

`js
import Confirmation from "@paprika/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?">
Trigger

;

or

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:

Links

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