Components

DialogActions

DialogActions renders primary and secondary actions inside Dialog.

Examples #

Import Syntax #

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

Actions #

Use DialogActions to add actions to the Dialog. Actions must be Mineral Buttons and are automatically styled to be minimal except for the last, which will be primary. This behavior can be overridden with props on the Button children.

<DemoLayout>
  <Dialog>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
    <DialogActions>
      <Button size="medium">Cancel</Button>
      <Button size="medium">Action</Button>
    </DialogActions>
  </Dialog>
</DemoLayout>

Variants #

Use the variant prop to help communicate intent.

Note

variant is automatically supplied to the last action 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>Title</DialogTitle>
          </DialogHeader>
          <DialogActions variant={variant}>
            <Button size="medium">Cancel</Button>
            <Button size="medium">{capitalize(variant)}</Button>
          </DialogActions>
        </Dialog>
      </DemoLayout>
    )
  })
}

API & Theme #

DialogActions Props #

The DialogActions component takes the following React props.

NameTypeDefaultDescription
childrenReact$Element<*> | Array<React$Element<*>>

Rendered Button(s)

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

Available variants

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

DialogActions 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
DialogActionsItem_margintheme.space_stack_sm