Alert Dialog

When it's time to grab your user's attention, our Alert Dialog steps in! Get your message across, without letting them skip a beat

Example

1import { AlertDialog } from '@sugarcoat/ui';
2
3<AlertDialog>
4  <AlertDialog.Trigger>Create page</AlertDialog.Trigger>
5  <AlertDialog.Content
6    title='Create new page'
7    description="Are you sure you want to create a new page"
8  />
9</AlertDialog>
10

API Reference

It builds on top of Radix-UI AlertDialog

Component	Description
AlertDialog	Our main stage where all the magic happens. It’s the parent component that controls the behavior and appearance of the dialog.
AlertDialog.Trigger	The maestro that calls the shots. It's the button, or any clickable element, that summons the AlertDialog when clicked.
AlertDialog.Content	The heart of the dialog. This component houses your dialog's main content, including the Title and Description.
AlertDialog.Title	The headline act of your dialog. It's the concise header text that announces the purpose of the dialog.
AlertDialog.Description	The storyteller of the dialog. It provides further details and context to support the Title.
AlertDialog.Action	The dialog's call-to-action. It's the button that users click to confirm and proceed with the dialog's main action.
AlertDialog.Cancel	The escape artist of the dialog. It's the button that users click to dismiss the dialog without taking any action.
AlertDialog.Footer	The base camp of your dialog. It typically holds the Action and Cancel buttons and any additional context or action elements.
AlertDialog.Overlay	The backstage of your dialog. It’s the semi-transparent and blured backdrop that appears behind your dialog, creating focus and indicating modality.

Component Properties

AlertDialog

Acts as RadixUI's AlertDialog. Most of the props available here can be used on the AlertDialog component

Prop	Type	Default	Explanation
`open`	`boolean`	-	Controls the open state of the dialog and is used together with onOpenChange.
`defaultOpen`	`boolean`	-	The initial open state of the dialog when it is rendered. Only used when open is not provided.
`onOpenChange`	`function`	-	Callback that is called when the open state of the dialog changes.
`overlay`	`boolean`	true	Render Dialog with the AlertDialog.Overlay component.

AlertDialog.Trigger

A wrapper around RadixUI's AlertDialog.Trigger and Sugarcoat Button.

Prop	Type	Default	Explanation
`variant`	`string`	primary	(Optional) Any of Button's variant style

All the props of Button are available and can be used to customize the trigger button.

Moreover, you can pass any element as a child of AlertDialog.Trigger to customize the trigger button as you wish

AlertDialog.Content

The heart of the dialog. This component houses your dialog's main content, including the Title and Description.

Prop	Type	Default	Explanation
`barebone`	`boolean`	false	(Optional) If true, the AlertDialog will be rendered without Title, Description and Action Buttons.

Note: If barebone is true, the AlertDialog will be rendered without Title, Description and Action Buttons. In this case, you can use the AlertDialog.Title, AlertDialog.Description, AlertDialog.Action and AlertDialog.Cancel components to customize the content of the dialog.

AlertDialog.Title

The headline act of your dialog. It's the concise header text that announces the purpose of the dialog.

Prop	Type	Default	Explanation
`asChild`	`boolean`	false	Replace the default element with a child element, merging their properties and behaviors.

AlertDialog.Description

The storyteller of the dialog. It provides further details and context to support the Title.

Prop	Type	Default	Explanation
`asChild`	`boolean`	false	Replace the default element with a child element, merging their properties and behaviors.

AlertDialog.Action

The dialog's call-to-action. It's the button that users click to confirm and proceed with the dialog's main action.

Prop	Type	Default	Explanation
`variant`	`string`	primary	(Optional) Any of Button's variant style
`asChild`	`boolean`	false	Replace the default element with a child element, merging their properties and behaviors.

All the props of Button are available and can be used to customize the trigger button.

AlertDialog.Cancel

The escape artist of the dialog. It's the button that users click to dismiss the dialog without taking any action.

Prop	Type	Default	Explanation
`variant`	`string`	ghost	(Optional) Any of Button's variant style
`asChild`	`boolean`	false	Replace the default element with a child element, merging their properties and behaviors.

All the props of Button are available and can be used to customize the trigger button.

AlertDialog.Footer

The base camp of your dialog. It typically holds the Action and Cancel buttons and any additional context or action elements.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius