- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color Picker
- Container
- Control Group
- Dialog
- Dropdown
- File Uploader
- FlexBox
- FormSOON
- Grid View
- IconSOON
- ImageSOON
- Input
- Link
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Separator
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Dialog
Need immediate user input? Pop open a Dialog. A window that says, "Hey, I need you for a sec!"Example
API Reference
It builds on top of Radix-UI Dialog
Component | Description |
---|---|
Dialog | The stage for focused conversations. Dialog is an engaging component that presents content in an attention-grabbing overlay, ensuring users focus on the information or actions at hand. |
Dialog.Trigger | The curtain puller. This subcomponent acts as the initiator for the dialog - a button, link, or any clickable element that, when interacted with, reveals the Dialog in all its glory. |
Dialog.Content | The heart of the conversation. The Content subcomponent is where you place the meat of your message, be it text, images, forms, or anything that you want to spotlight within the Dialog. |
Component Properties
Dialog
Acts as RadixUI's Dialog. Most of the props available here can be used on the Dialog 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 in modal mode, on top of an overlay |
Component Properties
Dialog.Content
Acts as RadixUI's Dialog. Most of the props available here can be used on the Dialog component
Prop | Type | Default | Explanation |
---|---|---|---|
title | string | ReactNode | - | The headline act. This prop can take a string or a React component to grace your Dialog with a captivating title. Whether you keep it simple with text or jazz it up with custom components, this is where you set the tone. |
footer | string | ReactNode | - | The grand finale. It accepts a string or a React component, giving you the liberty to design a footer that wraps up your Dialog. Be it a simple sign-off text or an array of action buttons, footer seals the deal. |