Popconfirm UI Component

Installation

npm i @synerise/ds-popconfirm

or

yarn add @synerise/ds-popconfirm

Usage

import Popconfirm from '@synerise/ds-popconfirm';

<Popconfirm title="title" onConfirm={() => alert('confirm')} onCancel={() => alert('cancel')}>

<button>text</button>

</Popconfirm>;

Demo

API

Property	Description	Type	Default
cancelText	Text of the Cancel button	string	Cancel
okText	Text of the Confirm button	string	OK
okType	Button type of the Confirm button	string	primary
title	Title of the confirmation box	string / React.ReactNode	-
description	Description of the confirmation box	string / React.ReactNode	-
images	Urls of images displayed as a carousel	string[]	[]
imagesAutoplay	Whether to autoplay images	boolean	false
imagesAutoplaySpeed	Speed of autoplay [ms]	number	5000
onCancel	Callback of cancel	(e: Event) => void	-
onConfirm	Callback of confirmation	(e: Event) => void	-
icon	Customize icon of confirmation	React.ReactNode	<Icon type="exclamation-circle" />
disabled	Whether component is disabled	boolean	false
withLink	Text with highlited text	React.ReactNode	-
closeIcon	Icon to close popconfirm	React.ReactNode	-
hideButtons	prop to hide buttons	React.ReactNode	-
titlePadding	prop to set padding	boolean	false
buttonsAlign	Sets footer buttons align	'right' / 'left' / undefined	'right'

Popcofirm.ConfirmMessage

Usage

import Popconfirm from '@synerise/ds-popconfirm';

<Popconfirm.ConfirmMessage

title='Copied! Keep it somewhere safe.'

icon={<Icon component={<WarningFillM />} color={'#ffc300'} />}

displayDuration={5000}

placement='topLeft'}

onClick={(showMessage) => {

do sth...

showMessage();

}}

>

<Button>

Click

</Button>

</Popconfirm.ConfirmMessage>

Demo

API

Property	Description	Type	Default
title	text confirm message	string	-
icon	icon component	React.ReactNode	-
displayDuration	confirm message display time in ms	number	5000
placement	position of confirm message left, top, right, bottom, topLeft, topRight, bottomLeft, bottomRight, leftTop, leftBottom,, rightTop, rightBottom	string	topLeft
onClick	method which returns a showConfirmMessage callback	(showConfirmMessage: () => void) => void	-