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

ComponentDescription
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

PropTypeDefaultExplanation
openboolean-

Controls the open state of the dialog and is used together with onOpenChange.

defaultOpenboolean-

The initial open state of the dialog when it is rendered. Only used when open is not provided.

onOpenChangefunction-

Callback that is called when the open state of the dialog changes.

overlaybooleantrue

Render Dialog with the AlertDialog.Overlay component.

AlertDialog.Trigger

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

PropTypeDefaultExplanation
variantstringprimary(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.

PropTypeDefaultExplanation
barebonebooleanfalse(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.

PropTypeDefaultExplanation
asChildbooleanfalse

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.

PropTypeDefaultExplanation
asChildbooleanfalse

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.

PropTypeDefaultExplanation
variantstringprimary(Optional) Any of Button's variant style
asChildbooleanfalse

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.

PropTypeDefaultExplanation
variantstringghost(Optional) Any of Button's variant style
asChildbooleanfalse

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