BumblebeeBumblebee

Validation checklist

Live demo

Drawer title

A Pill
overflowing text in a pill
A tag
New
Another
New
Copy Text
lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate
  • exercitation ullamco laboris nisi ut
    Pass
    20 March 2023, 12:20
  • exercitation ullamco laboris nisi ut
    Pass
    19 March 2023, 12:20
  • commodo consequat duis aute irure
    Pass
    18 March 2023, 12:20
  • ex ea commodo consequat duis17 March 2023, 12:20
  • aliqua ut enim ad minim16 March 2023, 12:20
  • ad minim veniam quis nostrud15 March 2023, 12:20
  • duis aute irure dolor in14 March 2023, 12:20
  • ea commodo consequat duis aute13 March 2023, 12:20
  • magna aliqua ut enim ad12 March 2023, 12:20
  • ut aliquip ex ea commodo11 March 2023, 12:20

Drawer title

A Pill
overflowing text in a pill
A tag
New
Another
New
Copy Text
lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquiplorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis autelorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrudlorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptatelorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi utlorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi

Code

import { Modal } from '@shieldpay/bumblebee/modal';

<Modal
  closeDialogText="close"
  open={modalOpen}
  onClose={() => setModalOpen(false)}
  dismissable
>
  <Modal.Title>Modal with two buttons</Modal.Title>
  <Text paragraph size="small">
    Modal dialog body text describing what the user needs to do next and why
    they need to do it.
  </Text>
  <Modal.Actions>
    <Button onClick={() => setModalOpen(false)}>Primary</Button>
    <Button onClick={() => setModalOpen(false)} variant="outline">
      Secondary
    </Button>
  </Modal.Actions>
</Modal>;