A11y-enabled modal, in several underlay color variations. Usage: always render this component, but control whether to show the modal through the show prop.

const MailIcon = require('../../visuals/Icon/svg/ic_mail.svg');
const AnonymousIcon = require('../../visuals/Icon/svg/d_anonymous.svg');

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
  <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="linkDark">
          transparent underlay
        </Button>
        <LoginModal show={active} variant="transparent" title="Modal title" onExit={toggle}>
          <Card
            content={
              <div style={{ minWidth: '50vw', minHeight: '30vh' }}>
                <Button onClick={toggle}>Hide</Button>
              </div>
            }
          />
        </LoginModal>
      </div>
    )}
  </Switch>

  <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="blue">
          blue underlay
        </Button>
        <LoginModal show={active} variant="blue" title="Modal title" onExit={toggle}>
          <Card
            content={
              <div
                style={{
                  width: '320px',
                  margin: '16px auto',
                }}
              >
                <Tabs
                  items={[
                    {
                      label: 'Log in',
                      id: 'login-tab',
                      content: (
                        <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
                          <Input>
                            <InputFieldWithIcon placeholder="Email" icon={MailIcon} semantic="Email" />
                          </Input>
                          <Input>
                            <InputFieldWithIcon
                              placeholder="Password"
                              icon={AnonymousIcon}
                              semantic="Password"
                              type="password"
                            />
                          </Input>
                          <Button variant="green" onClick={toggle}>
                            Log in
                          </Button>
                        </div>
                      ),
                    },
                    {
                      label: 'Sign up',
                      id: 'signup-tab',
                      content: (
                        <div style={{ display: 'flex', flexDirection: 'column', paddingTop: '24px' }}>
                          <InputForm placeholder="Full name" />
                          <Input>
                            <InputFieldWithIcon placeholder="Enter email" icon={MailIcon} semantic="Email" />
                          </Input>
                          <Input>
                            <InputFieldWithIcon
                              placeholder="Create password"
                              icon={AnonymousIcon}
                              semantic="Password"
                              type="password"
                            />
                          </Input>
                          <Button variant="green" onClick={toggle}>
                            Sign up
                          </Button>
                        </div>
                      ),
                    },
                  ]}
                />
              </div>
            }
          />
        </LoginModal>
      </div>
    )}
  </Switch>
  
  <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="white">
          ink underlay
        </Button>
        <StandardModal
          show={active}
          variant="ink"
          title="Modal title"
          onExit={toggle}
          header={<div>Are you sure?</div>}
          content={
              <div>
                Are you sure that you want to delete your account? You can't revert this changes later.
              </div>
          }
          footer={[
            <Button key="1" onClick={toggle} variant="white">Cancel</Button>,
            <Button key="2" onClick={toggle} variant="blue">Ok</Button>
          ]}
        />
      </div>
    )}
  </Switch>
</div>;