- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
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 '@haktos/sugarcoat-ui';23<AlertDialog>4 <AlertDialog.Trigger>Create page</AlertDialog.Trigger>5 <AlertDialog.Content6 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.
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.
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.