Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-confirmation-buttonUI Primitives(1 component)
npx shadcn@latest add buttonUsage
import {
ConfirmationButton
} from "@docyrus/ui/components/confirmation-button";
<ConfirmationButton
onConfirm={() => {}}
confirmationTitle={Are you sure?}
confirmationMessage={Please confirm before this action is executed.}
confirmLabel="Confirm"
cancelLabel="Cancel"
countdownSeconds={DEFAULT_COUNTDOWN_SECONDS}
onCancel={() => {}}
onTimeout={() => {}}
triggerClassName="..."
contentClassName="..."
side="top"
sideOffset={0}
contentWidth={320}
triggerSize={0}
triggerWidth={0}
triggerHeight={0}
triggerRadius={0}
speed={0}
bgClassName="..."
buttonVariant="destructive"
buttonSize="default"
/>API Reference
| Prop | Type | Default |
|---|---|---|
onConfirm | () => void | Promise<void> | — |
confirmationTitle | ReactNode | 'Are you sure?' |
confirmationMessage | ReactNode | 'Please confirm before this action is executed.' |
confirmLabel | string | 'Confirm' |
cancelLabel | string | 'Cancel' |
countdownSeconds | number | DEFAULT_COUNTDOWN_SECONDS |
disabled | boolean | false |
onCancel | () => void | — |
onTimeout | () => void | — |
triggerClassName | string | — |
contentClassName | string | — |
side | 'top' | 'bottom' | 'top' |
sideOffset | number | — |
contentWidth | number | 320 |
triggerSize | number | — |
triggerWidth | number | — |
triggerHeight | number | — |
triggerRadius | number | — |
speed | number | — |
bgClassName | string | — |
buttonVariant | ButtonVariant | 'destructive' |
buttonSize | ButtonSize | 'default' |
className | string | — |