Props for the Dialog component.

interface IDialog {
    bgColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    children?: ReactNode;
    contentStyle?: SxProps;
    customized?: boolean;
    height?: string
    | number;
    onClose: VoidFunction;
    open: boolean;
    title?: string;
    width?: string | number;
}

Hierarchy

  • DialogProps
    • IDialog

Properties

bgColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

The background color of the dialog. Can be a theme color or any valid CSS color.

children?: ReactNode

The content to display inside the dialog.

contentStyle?: SxProps

This is styling for the content

customized?: boolean

This remove the default Close Icon and padding

height?: string | number

The height of the dialog. Can be a string (e.g., '300px') or a number (e.g., 300).

onClose: VoidFunction

Function to execute when the dialog is closed.

open: boolean

Controls whether the dialog is open or not.

title?: string

Optional title for the dialog.

width?: string | number

The width of the dialog. Can be a string (e.g., '400px') or a number (e.g., 400).