Alert Dialog

A confirm dialog in the same rounded style, with pill actions and a destructive option.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { AlertDialogRounded } from '@/components/component-kit/items/alert-dialog-rounded';
3
4export function Example() {
5  return (
6    <AlertDialogRounded
7      trigger={<Button variant="outline">Delete chat</Button>}
8      title="Delete chat?"
9      description="This removes the conversation for everyone. It cannot be undone."
10      confirmLabel="Delete"
11      destructive
12      onConfirm={() => console.log('deleted')}
13    />
14  );
15}

Props

Alert Dialog properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that opens the dialog.
`title`	`ReactNode`	`—`	Dialog heading.
`description`	`ReactNode`	`—`	Supporting text under the heading.
`destructive`	`boolean`	`false`	Style the confirm action as destructive.
`onConfirm`	`() => void`	`—`	Confirm handler.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { AlertDialogRounded } from '@/components/component-kit/items/alert-dialog-rounded';
3
4export function Example() {
5  return (
6    <AlertDialogRounded
7      trigger={<Button variant="outline">Delete chat</Button>}
8      title="Delete chat?"
9      description="This removes the conversation for everyone. It cannot be undone."
10      confirmLabel="Delete"
11      destructive
12      onConfirm={() => console.log('deleted')}
13    />
14  );
15}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that opens the dialog.

title

ReactNode

—

Dialog heading.

description

ReactNode

—

Supporting text under the heading.

destructive

boolean

false

Style the confirm action as destructive.

onConfirm

() => void

—

Confirm handler.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { AlertDialogRounded } from '@/components/component-kit/items/alert-dialog-rounded';
3
4export function Example() {
5  return (
6    <AlertDialogRounded
7      trigger={<Button variant="outline">Delete chat</Button>}
8      title="Delete chat?"
9      description="This removes the conversation for everyone. It cannot be undone."
10      confirmLabel="Delete"
11      destructive
12      onConfirm={() => console.log('deleted')}
13    />
14  );
15}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that opens the dialog.

title

ReactNode

—

Dialog heading.

description

ReactNode

—

Supporting text under the heading.

destructive

boolean

false

Style the confirm action as destructive.

onConfirm

() => void

—

Confirm handler.

Alert Dialog

A confirm dialog in the same rounded style, with pill actions and a destructive option.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { AlertDialogRounded } from '@/components/component-kit/items/alert-dialog-rounded';
3
4export function Example() {
5  return (
6    <AlertDialogRounded
7      trigger={<Button variant="outline">Delete chat</Button>}
8      title="Delete chat?"
9      description="This removes the conversation for everyone. It cannot be undone."
10      confirmLabel="Delete"
11      destructive
12      onConfirm={() => console.log('deleted')}
13    />
14  );
15}

Props

Alert Dialog properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that opens the dialog.
`title`	`ReactNode`	`—`	Dialog heading.
`description`	`ReactNode`	`—`	Supporting text under the heading.
`destructive`	`boolean`	`false`	Style the confirm action as destructive.
`onConfirm`	`() => void`	`—`	Confirm handler.