Optional
background Color 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"
Optional
border Color 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"
Optional
children children ?: ReactNode
Optional
color 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"
Optional
header Title headerTitle ?: string
Optional
on Close onClose ?: () => void
Optional
sx sx ?: SxProps < Theme >
Optional
with Breakline withBreakline ?: boolean
Props for the custom BoxWithCloseContainer component.
Remarks
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.