Modal

Content-agnostic: only shows the content you pass in.

Press ESC or click outside the modal to close it.

Locks the scroll of background content.

Can be triggered with or without the click of a button.

Multiple "options" (buttons) can be configured. Each button can take an optional callback function.

If no options are passed to the Modal, it will automatically generate a single "Close" option, that simply closes the Modal.

Example triggered with button, with two options: "Accept" and "Close".

Click to open modal:

1import Modal from '@hummingbot/hbui/components/modal'
2import { P } from '@hummingbot/hbui/elements/typography'
3import { Button  } from '@hummingbot/hbui/elements/buttons'
4
5<Modal
6  title='Modal title'
7  description='Description of the modal context or purpose'
8  content={
9    <P>
10      Your application has been successfully submitted. Please review your 
11      order and if all looks good, click "Accept" to proceed.
12    </P>
13  }
14  options={[
15    {
16      label: "Cancel",
17      variant: "secondary",
18    },
19    {
20      label: "Accept",
21      variant: "success",
22      callBack: () => console.log('Clicked: Accept Option')
23    }
24  ]}
25  clickElement={
26    <Button variant='success'>Open modal</Button>
27  }
28/>

Example triggered with button, without providing any button options: A "Close" button is automatically generated.

Click to open modal

1import Modal from '@hummingbot/hbui/components/modal'
2import { P } from '@hummingbot/hbui/elements/typography'
3import { Button  } from '@hummingbot/hbui/elements/buttons'
4
5<Modal
6  title='Modal title'
7  description='Description of the modal context or purpose'
8  content={
9    <P>
10      Your application has been successfully submitted.
11    </P>
12  }
13  clickElement={
14    <Button variant='success'>Open modal</Button>
15  }
16/>

Example triggered with code: Pass in "showOpen" and omit "clickElement".

1import Modal from '@hummingbot/hbui/components/modal'
2import { P } from '@hummingbot/hbui/elements/typography'
3
4<Modal
5  showOpen={true}
6  dialogOnClose={() => console.log('Modal closed')}
7  title='Modal title'
8  description='Description of the modal context or purpose'
9  content={
10    <P>
11      Your application has been successfully submitted.
12    </P>
13  }
14/>