Modal

A modal dialog displays content that requires user interaction, in a layer above the page.

Default

The default form of a modal dialog.

import Modal from '@/components/modal';

<Modal
  actions={[
    { children: 'Try it now' },
    { children: 'Learn more' },
  ]}
  heading="Test drive your new search"
>
  <p>We’ve turbocharged your search results so you can get back to doing what you do best.</p>
</Modal>

Appearance

A modal dialog is available in two other variations. The appearance of the primary action and icon will change per variation.

Warning

Warning modals appear in anticipation of a significant change. Have empathy for people. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if they proceed, and provide an alternative where possible.

import Modal from '@/components/modal';

<Modal
  actions={[
    { children: 'Delete' },
    { children: 'Cancel' },
  ]}
  appearance="warning"
  heading="Delete the Newtown Repository"
>
  <p>Bamboo will permanently delete all related configuration settings, artifacts, logos, and results. This can’t be undone.</p>
</Modal>

Danger

Danger modals are used to inform people when something potentially destructive will happen if they continue. Explain the problem and provide a next step or an alternative.

import Modal from '@/components/modal';

<Modal
  actions={[
    { children: 'Trash it' },
    { children: 'No, keep it' },
  ]}
  heading="You’re about to delete this page"
  appearance="danger"
>
  <p>Before you delete it permanently, there’s some things you should know:</p>
  <ul>
    <li>4 pages have links to this page that will break</li>
    <li>2 child pages will be left behind in the page tree</li>
  </ul>
</Modal>

Scrolling behavior

Modal dialogs differ in width, whereas height is determined by the content. Once it reaches a certain threshold, the body content will scroll while the header and footer remain fixed until the bottom of the modal dialog is reached.

import Modal from '@/components/modal';

<Modal
  actions={[
    { children: 'Get started' },
    { children: 'Skip' },
  ]}
  heading="Easily set up your own projects"
  width="medium"
>
  <p>We simplified the way you set up issue types, workflows, fields, and screens. Check out the new, independent project experience to see it in action.</p>
</Modal>

Width

The width of the modal can be specified in different ways:

The recommended way to specify modal width is using named size options.
If a number is provided, the width is set to that number in pixels.
If a string including pixels or a percentage is provided, the width will be directly applied as a style.

import Modal from '@/components/modal';

<Modal
  actions={[
    { children: 'Get started' },
    { children: 'Skip' },
  ]}
  heading="Easily set up your own projects"
  width="medium"
>
  <p>We simplified the way you set up issue types, workflows, fields, and screens. Check out the new, independent project experience to see it in action.</p>
</Modal>