Components

DialogBody

DialogBody contains the main content of Dialog.

Examples #

Import Syntax #

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

Basic Usage #

DialogBody contains the main content of Dialog and provides uniform spacing around that content.

<DemoLayout>
  <Dialog>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
    <DialogBody>
      {content}
    </DialogBody>
  </Dialog>
</DemoLayout>

Scrolling #

Dialog body content that exceeds the size of the container will automatically scroll.

<DemoLayout>
  <Dialog>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
    <DialogBody>
      {content}
    </DialogBody>
  </Dialog>
</DemoLayout>

API & Theme #

DialogBody Props #

The DialogBody component takes the following React props.

NameTypeDefaultDescription
childrenReact$Node

Rendered DialogBody content

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

DialogBody Theme Variables #

These variables can be used as hooks to override this component's style at either a local or global level. The theme referenced below is whatever theme is available from props to the instance of this component.

VariableValue
DialogBody_outline_focus1px solid borderColor_theme_focus
DialogBody_boxShadowBottominset 0 -8px 8px -8px color_gray_60, inset 0 -1px borderColor
DialogBody_boxShadowLeftinset 8px 0 8px -8px color_gray_60, inset 1px 0 borderColor
DialogBody_boxShadowRightinset -8px 0 8px -8px color_gray_60, inset -1px 0 borderColor
DialogBody_boxShadowTopinset 0 8px 8px -8px color_gray_60, inset 0 1px borderColor