@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