We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Dialog

Dialogs are overlay UI elements that capture user attention for confirmations, dialogs, or inputs. They provide a focused interaction point, ensuring key actions or messages are acknowledged before proceeding.

Basic dialog

Preview

Code

Are you sure?

This action cannot be undone

Optional properties

Use the properties below to style the dialog and copy the code to your project. Try clicking on them.

Property	Type	Description
`shape`	`flat` \| `pill` \| `curve`	Defines the dialog's shape. `pill` is a fully rounded dialog, `curve` has rounded corners, and `flat` is a classic square-cornered dialog. Default is `flat`.
`position`	`top` \| `default`	Defines the dialog's position. `top` positions the dialog at the top of the screen, and `default` positions the dialog in the center of the screen.
`title`	string	Sets the title of the dialog. Default is `Are you sure?`.
`text`	string	Sets the text of the dialog.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the dialog component.

Supported directives

Selector	Directive name	Description
`zapDialogFooter`	ZapDialogFooterDirective	A directive that enables customizing footer in the dialog.

Example

Preview

Code

Are you sure?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit laudantium dolores ut voluptates quaerat consequuntur.

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the dialog.
`textColor`	Text color of the dialog.
`titleColor`	Text color of the title.
`borderColor`	Border color of the dialog.
`dismissColor`	Color of the dismiss icon
`dismissHoverColor`	Color of the dismiss icon when hovered
`primaryBtnBgColor`	Background color of the primary button
`primaryBtnTextColor`	Text color of the primary button
`primaryBtnBorderColor`	Border color of the primary button
`primaryBtnBgHoverColor`	Background color of the primary button when hovered
`primaryBtnTextHoverColor`	Text color of the primary button when hovered
`primaryBtnBorderHoverColor`	Border color of the primary button when hovered
`secondaryBtnBgColor`	Background color of the secondary button
`secondaryBtnTextColor`	Text color of the secondary button
`secondaryBtnBorderColor`	Border color of the secondary button
`secondaryBtnBgHoverColor`	Background color of the secondary button when hovered
`secondaryBtnTextHoverColor`	Text color of the secondary button when hovered
`secondaryBtnBorderHoverColor`	Border color of the secondary button when hovered

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the dialog's corners.
`paddingLeft`	Left padding of the dialog.
`paddingRight`	Right padding of the dialog.
`paddingTop`	Top padding of the dialog.
`paddingBottom`	Bottom padding of the dialog.
`padding`	Padding around the dialog's content.
`width`	Width of the dialog.
`height`	Height of the dialog.
`titleFontSize`	Font size of the title.
`titleFontWeight`	Font weight of the title.
`titleLineHeight`	Line height of the title.
`titleLetterSpacing`	Letter spacing of the title.
`fontSize`	Font size of the dialog's text.
`fontWeight`	Font weight of the dialog's text.
`lineHeight`	Line height of the dialog's text.
`letterSpacing`	Letter spacing of the dialog's text.
`dismissFontSize`	Font size of the dismiss element.
`dismissFontWeight`	Font weight of the dismiss element.
`dismissLineHeight`	Line height of the dismiss element.
`dismissLetterSpacing`	Letter spacing of the dismiss element.
`primaryBtnFontSize`	Font size of the primary button element.
`primaryBtnFontWeight`	Font weight of the primary button element.
`primaryBtnLineHeight`	Line height of the primary button element.
`primaryBtnLetterSpacing`	Letter spacing of the primary button element.
`secondaryBtnFontSize`	Font size of the secondary button element.
`secondaryBtnFontWeight`	Font weight of the secondary button element.
`secondaryBtnLineHeight`	Line height of the secondary button element.
`secondaryBtnLetterSpacing`	Letter spacing of the secondary button element.
`primaryBtnBorderRadius`	Border radius of the primary button
`secondaryBtnBorderRadius`	Border radius of the secondary button