Sections
Components
- AlertBanner
- AlertDialog
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- CalendarIcon
- CellLayout
- CellLink
- Checkbox
- Collapse
- ContentSwitcher
- ControlLabel
- DatePicker
- Dialog
- Divider
- Drawer
- EmptyCell
- EmptyState
- Empty
- ErrorOverlay
- FilterBar
- FilterChips
- Flex
- GridLayout
- HumanisedDate
- Icon
- InputDuration
- InputField
- Input
- Label
- Loader
- MoreActions
- NumberInput
- OutsideClickHandler
- PageLoader
- Page
- Popconfirm
- Popover
- ProgressPie
- Progress
- RadioButtonGroup
- RadioGroup
- Radio
- RelativeTime
- Resizable
- SearchInput
- Select
- SkeletonText
- Skeleton
- Space
- SquadAvatarList
- StatusPicker
- Stepper
- Switch
- TableLight
- Tabs
- Tag
- Text
- Textarea
- Toast
- Tooltip
- TriggerSelect
- Upload
import { Popconfirm, Button } from "@/rl-ui";
<Popconfirm title="Remove?" onConfirm={onRemove}>
<Button variant="ghost">Remove</Button>
</Popconfirm>Examples#
Non-destructive#
import { Popconfirm, Button } from "@/rl-ui";
<Popconfirm title="Archive?" description="You can restore later." danger={false} okText="Archive">
<Button variant="secondary">Archive</Button>
</Popconfirm>API#
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Confirm title (required). |
description | ReactNode | — | Supporting copy. |
okText | string | "Delete" | Confirm button label. |
cancelText | string | "Cancel" | Cancel button label. |
danger | boolean | true | Use danger styling on confirm. |
side | "top" | "right" | "bottom" | "left" | "top" | Preferred placement. |
onConfirm | () => void | — | Confirm handler. |
onCancel | () => void | — | Cancel handler. |
disabled | boolean | false | Disable the confirm. |