Function CustomHeader

packages/react/src/Dialog/Dialog.features.stories.tsx:60–80

({
  title,
  subtitle,
  dialogLabelId,
  dialogDescriptionId,
  onClose,
}: React.PropsWithChildren<DialogProps & {dialogLabelId: string; dialogDescriptionId: string}>)

}

function CustomHeader({
  title,
  subtitle,
  dialogLabelId,
  dialogDescriptionId,
  onClose,
}: React.PropsWithChildren<DialogProps & {dialogLabelId: string; dialogDescriptionId: string}>) {
  const onCloseClick = useCallback(() => {
    onClose('close-button')
  }, [onClose])
  if (typeof title === 'string' && typeof subtitle === 'string') {
    return (
      <Box bg="accent.subtle">
        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
        <h2 id={dialogDescriptionId}>{subtitle.toLowerCase()}</h2>
        <Dialog.CloseButton onClose={onCloseClick} />
      </Box>
    )
  }
  return null
}
function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
}