Components

DialogTitle

DialogTitle displays the title of Dialog.

Examples #

Import Syntax #

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

Basic Usage #

Display a title with predefined Mineral styles. Providing DialogTitle content also automatically creates an accessible label for the Dialog.

Note

DialogTitle must be wrapped in a DialogHeader.

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

Element & Appearance #

Apply the appropriate semantic meaning & styles the as and appearance props. See Text for more details.

<DemoLayout>
  <Dialog>
    <DialogHeader>
      <DialogTitle as='h3' appearance="h1">
        This title is an h3 that looks like a level 1 heading
      </DialogTitle>
    </DialogHeader>
  </Dialog>
</DemoLayout>

Variants #

Use the variant prop to help communicate intent.

Note

variant is automatically supplied to the title if the prop is passed to the Dialog root; see Dialog Variants.

() => {
  return ['success', 'warning', 'danger'].map(variant => {
    return (
      <DemoLayout key={variant}>
        <Dialog>
          <DialogHeader>
            <DialogTitle variant={variant}>
              {capitalize(variant) + ' ipsum dolor sit amet'}
            </DialogTitle>
          </DialogHeader>
        </Dialog>
      </DemoLayout>
    )
  })
}

API & Theme #

DialogTitle Props #

The DialogTitle component takes the following React props.

NameTypeDefaultDescription
appearanceh4

Available styles

childrenReact$Noderequired

Rendered DialogTitle content

idstring

Id of the DialogTitle

variant'danger' | 'success' | 'warning'

Available variants

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

DialogTitle 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
DialogTitle_colortheme.h4_color
DialogTitle_fontSizetheme.h4_fontSize
DialogTitle_fontWeighttheme.h4_fontWeight
DialogTitleIcon_margintheme.space_inline_sm
DialogTitleIcon_size1.5em