Dialog

Variants

Use the variant prop to help communicate intent. Note that the variant is automatically applied to the title and primary action.

() => {
  return ['success', 'warning', 'danger'].map(variant => {
    return (
      <DemoLayout key={variant}>
        <Dialog
          variant={variant}
          title={capitalize(variant) + ' ipsum dolor sit amet'}
          actions={[
            { text: 'Cancel' },
            { text: 'Action' }
          ]}>
          <Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Text>
        </Dialog>
      </DemoLayout>
    );
  });
}