DialogHeader | Mineral UI

DialogHeader displays title content and an optional close button at the top of the Dialog.

Examples #

Import Syntax #

import Dialog, { DialogHeader } from 'mineral-ui/Dialog';

Basic Usage #

DialogHeader is used to prepend a header to a Dialog. It can contain any children, but is best used with DialogTitle.

<DemoLayout>
  <Dialog>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
  </Dialog>
</DemoLayout>

Close Button #

Use the closeButton prop to provide your own close button for Dialog.

<DemoLayout>
  <Dialog>
    <DialogHeader
      closeButton={<Button
        iconStart={<IconClear />}
        aria-label="Close"
        size="small"
        variant="danger"
      />}
    >
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
  </Dialog>
</DemoLayout>

API & Theme #

DialogHeader Props #

The DialogHeader component takes the following React props.

Name	Type	Default	Description
children	React$Node		Rendered Dialog title; use of DialogTitle is recommended
closeButton	React$Node		Rendered close button

Undocumented properties, including as and css, will be applied to the root element.