---
name: FullModal
menu: Components
route: /components/full-modal
---

import { Playground, PropsTable } from 'docz'
import moment from 'moment'
import { Button, FullModal, Table, ArrowButton, CloseButton } from '@personio/ui-components'
import { State, Toggle } from 'react-powerplug'
import './full-modal.scss';

# FullModal

<PropsTable of={FullModal} />

## Examples

<Playground>
  <div>
    <State initial={{ visible: false }}>
      {({ state, setState }) => (
        <React.Fragment>
          <Button theme="primary" onClick={() => {
            setState({ visible: true })
          }}>
            Open
          </Button>
          <FullModal
            visible={state.visible}
            onRequestToClose={() => {
              setState({ visible: false })
            }}
          >
            <FullModal.Header>
              <div className="f-header">
                <div className="f-header-arrows">
                  <ArrowButton direction="up" />
                  <ArrowButton direction="down" />
                </div>
                <div className="f-header-details"></div>
                <div className="f-header-close">
                  <CloseButton />
                </div>
              </div>
            </FullModal.Header>
            <FullModal.Body>
              <div>
                <div className="f-table-container">
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={5}>Personal data</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Attributes</Table.Cell>
                        <Table.Cell>Old value</Table.Cell>
                        <Table.Cell>New value</Table.Cell>
                        <Table.Cell>Valid from</Table.Cell>
                        <Table.Cell>Edited on</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>IBAN</Table.Cell>
                        <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
                        <Table.Cell bold theme="warning">DE01 1211 2421 2311 9312 09</Table.Cell>
                        <Table.Cell>01.05.18</Table.Cell>
                        <Table.Cell>15.05.18</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>BIC</Table.Cell>
                        <Table.Cell>CO1345DE</Table.Cell>
                        <Table.Cell bold theme="warning">NX7821DE</Table.Cell>
                        <Table.Cell>01.05.18</Table.Cell>
                        <Table.Cell>15.05.18</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Tax ID</Table.Cell>
                        <Table.Cell>42 187 999 19</Table.Cell>
                        <Table.Cell bold theme="warning">(Deleted)</Table.Cell>
                        <Table.Cell>01.05.18</Table.Cell>
                        <Table.Cell>15.05.18</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
                <div className="f-table-container">
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={5}>Salary data</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Type</Table.Cell>
                        <Table.Cell>Old value</Table.Cell>
                        <Table.Cell>New value</Table.Cell>
                        <Table.Cell>Valid from</Table.Cell>
                        <Table.Cell>Edited on</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>Main Salary</Table.Cell>
                        <Table.Cell>DE77 1201 0131 0678 4371 90</Table.Cell>
                        <Table.Cell bold theme="warning">3.400,00</Table.Cell>
                        <Table.Cell>01.05.18</Table.Cell>
                        <Table.Cell>15.05.18</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Bonus</Table.Cell>
                        <Table.Cell empty />
                        <Table.Cell bold theme="warning">500,00</Table.Cell>
                        <Table.Cell>01.05.18</Table.Cell>
                        <Table.Cell>15.05.18</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
                <div>
                  <Table>
                    <Table.Head>
                      <Table.Row>
                        <Table.Cell colSpan={4}>Absence Periods</Table.Cell>
                      </Table.Row>
                      <Table.Row theme="default">
                        <Table.Cell>Absence type</Table.Cell>
                        <Table.Cell>Absence start</Table.Cell>
                        <Table.Cell>Absence end</Table.Cell>
                        <Table.Cell>Absence days in the period</Table.Cell>
                      </Table.Row>
                    </Table.Head>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell bold>Paid vacation</Table.Cell>
                        <Table.Cell>15.05.2018</Table.Cell>
                        <Table.Cell>29.05.2018</Table.Cell>
                        <Table.Cell>1</Table.Cell>
                      </Table.Row>
                      <Table.Row>
                        <Table.Cell bold>Sick days</Table.Cell>
                        <Table.Cell>02.05.2018</Table.Cell>
                        <Table.Cell>04.05.2018</Table.Cell>
                        <Table.Cell>03</Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </Table>
                </div>
              </div>
            </FullModal.Body>
          </FullModal>
         </React.Fragment>
      )}
    </State>
  </div>

</Playground>

