Dialog

A dialog is a type of modal window that is displayed on top of the current app content and remains on the screen until confirmed, dismissed, or a required action has been taken.

Usage

XelaDialog(
    icon: "",
    title: "Popup title",
    description: "Popup description",
    primaryButton: XelaButton(text: "Action", size: .Medium, type: .Primary),
    secondaryButton: XelaButton(text: "Action", size: .Medium, type: .Secondary, foregroundColor: Color(xelaColor: .Blue3), borderLineWidth: 0),
    closeButton: XelaButton(leftIcon: nil, size: .Medium, background: Color.clear, foregroundColor: Color(xelaColor: .Gray6), borderLineWidth: 0, removePaddings: true, systemIcon: "xmark"),
    buttonsHorizontal: true,
    background: Color(.white),
    titleColor: Color(xelaColor: .Gray3),
    descriptionColor: Color(xelaColor: .Gray3),
    iconColor: Color(xelaColor: .Gray10)
)
.shadow(color: Color(.black).opacity(0.04), radius: 48, x:0 , y: 4) // shadow
.shadow(color: Color(.black).opacity(0.04), radius: 12, x:0 , y: 8) // shadow
.padding() // padding

Properties

Name	Type	Default Value	Required	Description
icon	String		NO	Top Center icon from Assets
title	String		NO	Title string
description	String		NO	Description string
primaryButton	XelaButton?	nil	NO	Primary button
secondaryButton	XelaButton?	nil	NO	Secondary button
closeButton	XelaButton?	nil	NO	Close dialog button
buttonsHorizontal	Bool	true	NO	Primary and Secondary buttons positions
background	Color	Color(.white)	NO	Background color
titleColor	Color	Color(xelaColor: .Gray3)	NO	Title color
descriptionColor	Color	Color(xelaColor: .Gray3)	NO	Description color
iconColor	Color	Color(xelaColor: .Gray3)	NO	Icon color