Dialog

Need immediate user input? Pop open a Dialog. A window that says, "Hey, I need you for a sec!"

Example

1  import { Dialog, FlexBox } from '@sugarcoat/ui';
2
3  <Dialog>
4      <Dialog.Trigger>Get started</Dialog.Trigger>
5      <Dialog.Content title='Welcome Aboard!'>
6        <Typography.Paragraph>
7          🚀 Fasten your seat belts! 🚀
8        </Typography.Paragraph>
9
10        <Typography.Paragraph>
11        Here at SugarcoatUI, we believe in making your development experience as delightful as a candy shop. From responsive GridViews to customizable buttons, our components are designed to make your web applications look good and taste even better.
12        </Typography.Paragraph>
13
14        <Typography.Paragraph>
15        🌟 Highlights: 🌟
16        </Typography.Paragraph>
17
18        <Typography.Paragraph>
19        Accessible out of the box: We've got your back with components that adhere to WCAG standards.
20        Micro-interactions: Sprinkle your UI with animations that make users smile.
21        Efficiency redefined: Time-saving components with a focus on developer experience.
22        Ready to dive into the sweetness? Take a look at our Getting Started guide, or explore the components that catch your eye.
23        </Typography.Paragraph>
24
25        <Typography.Paragraph>
26        🍭 Happy Building! 🍭
27        </Typography.Paragraph>
28      </Dialog.Content>
29    </Dialog>
30

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.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius