1import React from 'react'
2import { Button, Header, Image, Modal } from 'semantic-ui-react'
3
4function ModalExampleModal() {
5 const [open, setOpen] = React.useState(false)
6
7 return (
8 <Modal
9 onClose={() => setOpen(false)}
10 onOpen={() => setOpen(true)}
11 open={open}
12 trigger={<Button>Show Modal</Button>}
13 >
14 <Modal.Header>Select a Photo</Modal.Header>
15 <Modal.Content image>
16 <Image size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' wrapped />
17 <Modal.Description>
18 <Header>Default Profile Image</Header>
19 <p>
20 We've found the following gravatar image associated with your e-mail
21 address.
22 </p>
23 <p>Is it okay to use this photo?</p>
24 </Modal.Description>
25 </Modal.Content>
26 <Modal.Actions>
27 <Button color='black' onClick={() => setOpen(false)}>
28 Nope
29 </Button>
30 <Button
31 content="Yep, that's me"
32 labelPosition='right'
33 icon='checkmark'
34 onClick={() => setOpen(false)}
35 positive
36 />
37 </Modal.Actions>
38 </Modal>
39 )
40}
41
42export default ModalExampleModal