Alert Dialog

Alert dialogs can be disruptive because they require users to take an action before returning to the application; they should be used thoughtfully and sparingly.

Acknowledgment

Acknowledgment dialogs are used when the system requires the user to acknowledge the presented information. It contains only a single action, commonly “Okay”.

Edit in Playroom

const [isOpen, setOpen] = useState(false);
const actions = {
  confirm: { label: 'Okay', action: () => setOpen(false) },
};
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <AlertDialog actions={actions} isOpen={isOpen} title="Hey there">
      <Stack gap="medium">
        <Text>
          You’ve now created 3 of 3 free pay runs. We’re continuing to work hard
          to make this app powerful and easy to use.
        </Text>
        <Text>
          If you find it valuable, please{' '}
          <TextLink href="#">subscribe</TextLink> in your Payroll Mobile App to
          get unlimited pay runs, and much more!
        </Text>
      </Stack>
    </AlertDialog>
  </>
);

Confirmation

Confirmation dialogs are used to confirm significant user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur.

The title should in most cases be phrased as a short binary dichotomous question, so that the action is easy and clear to make. Read this UX article for more copywriting direction and tips.

If the confirm action is asynchronous, you may also pass a loading property with the confirm action options to influence the button state.

Edit in Playroom

const [isOpen, setOpen] = useState(false);
const [isLoading, setLoading] = useState(false);
function confirmEdit() {
  setLoading(true);
  setTimeout(() => {
    setLoading(false);
    setOpen(false);
  }, 2000);
}
const actions = {
  confirm: { label: 'Yes, edit', action: confirmEdit, loading: isLoading },
  cancel: { label: 'Cancel', action: () => setOpen(false) },
};
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <AlertDialog actions={actions} isOpen={isOpen} title="Edit pay run?">
      <Text>If you continue, the pay run will be reverted to draft.</Text>
    </AlertDialog>
  </>
);

Critical Confirmation

Critical confirmation dialogs describe destructive or irreversible actions. They are commonly used in situations where confirmation of an action would result in significant data loss if done accidentally.

Edit in Playroom

const [isOpen, setOpen] = useState(false);
const actions = {
  confirm: { label: 'Yes, delete', action: () => setOpen(false) },
  cancel: { label: 'Cancel', action: () => setOpen(false) },
};
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <AlertDialog
      actions={actions}
      isOpen={isOpen}
      title="Delete pay run?"
      tone="critical"
    >
      <Text>This action is permanent and cannot be reversed.</Text>
    </AlertDialog>
  </>
);

Info Dialog

Use info dialogs to communicate impactful information at key moments:

Celebrate the success of a large task
Welcome a new user onboard
Inform users that their free trial has ended

You can use any of our Spot or Hero illustrations in the illustration prop.

Edit in Playroom

const [isOpen, setOpen] = useState(false);
const actions = {
  confirm: { label: 'Continue', action: () => setOpen(false) },
  cancel: { label: 'Cancel', action: () => setOpen(false) },
};
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <InfoDialog
      isOpen={isOpen}
      illustration={<SpotCelebrate />}
      onClose={() => setOpen(false)}
      title="Welcome to Payroll Web!"
      actions={actions}
    >
      <Text color="muted">
        Our plans include Basic (free) and Premium. Our premium plan has many
        great features like leave balances and reports. We’ll start you on a
        premium free trial with no obligations - you can opt out in Settings at
        anytime.
      </Text>
    </InfoDialog>
  </>
);

Content Dialog

Content dialogs are commonly used for short and non-frequent tasks, such as editing or management tasks. If a user needs to repeatably preform a task, consider making the task do-able from the main page.

Sections

The content dialog is composed of three distinct zones: A header, the body, and a footer.

Edit in Playroom

const [isOpen, setOpen] = useState(false);
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <ContentDialog
      isOpen={isOpen}
      onClose={() => setOpen(false)}
      size="medium"
      header={
        <Box paddingX="xlarge" paddingY="large">
          <Heading level="2">Header section</Heading>
        </Box>
      }
      footer={
        <Box paddingX="xlarge" paddingY="large">
          <Text color="muted" size="small">
            Footer section
          </Text>
        </Box>
      }
    >
      <Box paddingX="xlarge" paddingY="large">
        <Text>Body section</Text>
      </Box>
    </ContentDialog>
  </>
);

Sizes

The content dialog is available in three sizes:

small - text content or short forms
medium - use for medium to large forms
large - reserved for tables, and other data rich interfaces

Edit in Playroom

const SIZES = ['small', 'medium', 'large'];
const [isOpen, setOpen] = useState(false);
const [size, setSize] = useState(SIZES[0]);
const titleCase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
return (
  <Inline gap="medium">
    <SegmentedControl
      onChange={setSize}
      value={size}
      options={SIZES.map((value) => ({ label: titleCase(value), value }))}
    />
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <ContentDialog
      isOpen={isOpen}
      onClose={() => setOpen(false)}
      size={size}
      header={
        <Box paddingX="xlarge" paddingY="large">
          <Heading level="2">{titleCase(size)} dialog</Heading>
        </Box>
      }
    >
      <Box paddingX="xlarge" paddingY="large">
        <Text>
          Cupcake ipsum dolor sit amet bonbon chocolate cake fruitcake.
          Chocolate bar gummi bears gummi bears jelly beans. Gummi bears cookie
          tart topping. Marshmallow caramels gummies gummies marzipan topping
          brownie pudding.
        </Text>
      </Box>
    </ContentDialog>
  </Inline>
);

Overflow

The content dialog will fill the available vertical space. When this happens the "body" section will become scrollable.

Edit in Playroom

const [isOpen, setOpen] = useState(false);
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <ContentDialog
      isOpen={isOpen}
      onClose={() => setOpen(false)}
      size="medium"
      header={
        <Box paddingX="xlarge" paddingY="large">
          <Heading level="2">Overflow example</Heading>
        </Box>
      }
      footer={
        <Inline align="right" paddingX="xlarge" paddingY="large">
          <Button onClick={() => setOpen(false)} label="Close" />
        </Inline>
      }
    >
      <Stack gap="large" paddingX="xlarge" paddingY="large">
        <Text>
          Cupcake ipsum dolor sit amet bonbon chocolate cake fruitcake.
          Chocolate bar gummi bears gummi bears jelly beans. Gummi bears cookie
          tart topping. Marshmallow caramels gummies gummies marzipan topping
          brownie pudding. Marshmallow gummies candy pie pastry gummi bears.
          Sweet topping pudding. Candy tootsie roll lollipop dessert icing jelly
          beans. Sweet ice cream cake carrot cake. Cheesecake sesame snaps
          croissant toffee toffee. Macaroon donut apple pie cake tart
          gingerbread. Croissant cookie halvah chupa chups tootsie roll tart.
          Dragée cupcake cake brownie sesame snaps sugar plum bear claw. Powder
          cookie cupcake topping sesame snaps dragée halvah wafer tiramisu.
        </Text>
        <Text>
          Wafer lollipop icing pudding biscuit. Lemon drops jelly beans cupcake
          candy cotton candy candy canes jelly marshmallow. Apple pie bear claw
          powder sesame snaps macaroon brownie jelly beans halvah pastry.
          Lollipop cookie chocolate cake gingerbread lollipop dessert powder
          jujubes. Powder icing jelly-o sesame snaps chocolate bar cookie apple
          pie cookie fruitcake. Cotton candy danish halvah chocolate cake candy
          jujubes cupcake cotton candy chocolate. Tiramisu cupcake gummies
          caramels tiramisu chocolate bar chocolate cake carrot cake. Biscuit
          pie sweet cotton candy lollipop halvah. Chocolate cake cake topping
          candy canes. Wafer marzipan croissant pudding sugar plum. Sweet roll
          sesame snaps cheesecake macaroon. Cotton candy marzipan carrot cake
          liquorice chocolate pastry pie cotton candy. Chupa chups halvah sesame
          snaps macaroon.
        </Text>
        <Text>
          Jujubes cheesecake tart pudding chocolate. Dragée gummies tootsie roll
          gummi bears sweet roll cotton candy dragée fruitcake. Marshmallow
          jelly-o lollipop chupa chups. Lollipop ice cream powder. Biscuit icing
          sweet croissant cheesecake sweet roll. Croissant caramels halvah
          macaroon jelly beans icing wafer. Sweet roll tart icing gummies donut
          chupa chups macaroon marshmallow. Croissant cookie muffin jelly beans.
          Croissant cupcake carrot cake pastry dessert biscuit sweet. Chocolate
          brownie croissant biscuit oat cake powder tiramisu. Topping candy
          canes halvah chocolate bar cotton candy donut gummi bears. Powder
          gummi bears cupcake macaroon tootsie roll ice cream pie. Danish candy
          canes candy marshmallow macaroon soufflé pie sweet donut. Jujubes
          cheesecake macaroon apple pie gingerbread cheesecake apple pie
          brownie.
        </Text>
        <Text>
          Muffin ice cream gummies cake jujubes dragée sweet roll. Bonbon
          topping sesame snaps macaroon chocolate jelly. Icing lollipop toffee
          dessert icing. Chupa chups chocolate bar croissant soufflé topping.
          Cake donut marzipan biscuit cake wafer. Caramels jelly-o marzipan
          chupa chups caramels halvah. Ice cream muffin chocolate jelly muffin
          pie pudding cake. Muffin candy gingerbread apple pie. Jelly beans
          liquorice cake bonbon. Dragée danish pie croissant sweet. Tart dragée
          croissant liquorice. Tiramisu chocolate bar apple pie donut sweet oat
          cake. Cake icing croissant jujubes dragée chocolate cake fruitcake
          sesame snaps. Chupa chups liquorice jelly tootsie roll tootsie roll
          oat cake.
        </Text>
        <Text>
          Tart wafer gingerbread cake. Lollipop tiramisu donut jelly pie pie
          liquorice biscuit. Biscuit pastry gummies sesame snaps sweet.
          Marshmallow donut marzipan croissant bear claw muffin tiramisu
          gingerbread. Bear claw candy canes marzipan cake croissant jelly
          sweet. Donut dragée tiramisu sweet. Halvah chocolate cake sugar plum
          chupa chups topping cookie. Pudding gummi bears pastry pudding gummi
          bears apple pie pudding. Chocolate bar jelly sweet roll lollipop bear
          claw brownie cookie chupa chups. Bear claw tootsie roll cake chocolate
          dessert liquorice candy soufflé sweet. Soufflé chupa chups chocolate
          cake ice cream. Cotton candy gingerbread soufflé candy powder
          gingerbread. Marzipan soufflé cotton candy. Oat cake jujubes icing
          sesame snaps pie.
        </Text>
      </Stack>
    </ContentDialog>
  </>
);

Composition

Compose other components together within the content modal to create sophisticated interfaces.

Edit in Playroom

const [isOpen, setOpen] = useState(false);
const handleClose = () => setOpen(false);
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <ContentDialog
      isOpen={isOpen}
      onClose={handleClose}
      size="medium"
      as="form"
      onSubmit={(e) => {
        e.preventDefault();
        setOpen(false);
        console.log('form submission', e);
      }}
      header={
        <Box paddingX="xlarge" paddingY="large">
          <Heading level="6" color="muted">
            Edit note for account
          </Heading>
          <Heading level="3">397 - Materials</Heading>
        </Box>
      }
      footer={
        <Inline align="right" paddingX="xlarge" paddingY="large" gap="small">
          <Button
            onClick={handleClose}
            label="Discard"
            weight="none"
            tone="passive"
          />
          <Button type="submit" label="Save note" />
        </Inline>
      }
    >
      <Box padding="xlarge">
        <Field
          label="Note"
          description="URL’s are supported and will automatically convert to clickable links."
        >
          <Textarea />
        </Field>
      </Box>
    </ContentDialog>
  </>
);

Blank Dialog

Has no opinions about content, render whatever you need as children.

Edit in Playroom

const { spacing } = useTheme();
const [isOpen, setOpen] = useState(false);
const gutter = spacing.small * 2;
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open dialog" />
    <BlankDialog isOpen={isOpen} onClose={() => setOpen(false)}>
      <Box
        width={`calc(100vw - ${gutter}px)`}
        height={`calc(100vh - ${gutter}px)`}
        padding="large"
      >
        <ActionButton label="Close" onClick={() => setOpen(false)} />
      </Box>
    </BlankDialog>
  </>
);

Modal Dialog

Acknowledgment

Confirmation

Critical Confirmation

Info Dialog

Content Dialog

Sections

Sizes

Overflow

Composition

Blank Dialog