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
  • aliquip ex ea commodo consequat
    Pass
    20 March 2023, 12:20
  • quis nostrud exercitation ullamco laboris
    Pass
    19 March 2023, 12:20
  • aute irure dolor in reprehenderit
    Pass
    18 March 2023, 12:20
  • ut aliquip ex ea commodo17 March 2023, 12:20
  • nostrud exercitation ullamco laboris nisi16 March 2023, 12:20
  • quis nostrud exercitation ullamco laboris15 March 2023, 12:20
  • aliquip ex ea commodo consequat14 March 2023, 12:20
  • dolore magna aliqua ut enim13 March 2023, 12:20
  • duis aute irure dolor in12 March 2023, 12:20
  • ut enim ad minim veniam11 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 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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderitlorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quislorem 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 ut aliquip ex ealorem 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

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>;