Props for the custom BoxWithCloseContainer component.

This component extends a flexible Box layout and conditionally renders a header with a title and/or a close button. It supports dynamic background and border color styling via theme tokens.

interface BoxWithCloseContainerProps {
    backgroundColor?:
        | "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";
    borderColor?: | "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;
    color?: | "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";
    headerTitle?: string;
    onClose?: () => void;
    sx?: SxProps<Theme>;
    withBreakline?: boolean;
}

Properties

backgroundColor?:
    | "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"

Background color of the container, based on the theme color system.

borderColor?:
    | "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"

Border color for the top section of the container, based on the theme color system.

children?: ReactNode

The main content to be displayed inside the container.

color?:
    | "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"

Font color for the container content, based on the theme color system.

headerTitle?: string

Optional title to display at the top of the container.

onClose?: () => void

Callback function to trigger when the close button is clicked.

sx?: SxProps<Theme>

Custom styles to apply to the root container.

withBreakline?: boolean

Whether to include a visual horizontal divider after the header.

false