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');
const ImageHeader = require('../../visuals/Illustrations/Product_illustrations-17.svg');

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
  <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">
          StandardModal
        </Button>
        <StandardModal
          show={active}
          title="The new standard modal"
          onExit={toggle}
          content={
              <div>
                Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later.
              </div>
          }
          primaryAction={{onClick: ()=>{console.log('primAction')}, label:'Ok'}}
          secondaryAction={{onClick: ()=>{console.log('secondaryAction')}, label:'Cancel'}}
          // tertiaryAction={{onClick: ()=>{console.log('tertiaryAction')}, label:'Switch Account'}}
          hint="Some hint that you woould like to read, once that modal is open"
        />
      </div>
    )}
  </Switch>
 <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="white">
          StandardModal with Image
        </Button>
        <StandardModal
          Image={ImageHeader}
          show={active}
          title="What do you think about the new Doodle?"
          onExit={toggle}
          content={
              <div>
                <p>We’d love to hear how you feel about it in this quick online survey.</p>
                We will be reading every response. Your honest feedback helps us make the new Doodle better for you and your team.
              </div>
          }
          primaryAction={{onClick: ()=>{console.log('primAction')}, label:'Give Feedback'}}
          secondaryAction={{onClick: ()=>{console.log('secondaryAction')}, label:'Cancel'}}
        />
      </div>
    )}
  </Switch>


      <Switch>
    {({ active, toggle }) => (
      <div>
        <Button onClick={toggle} variant="white">
          StandardModal tertiary
        </Button>
        <StandardModal
          show={active}
          title="The new standard modal"
          onExit={toggle}
          content={
              <div>
                Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account? You can't revert this changes later. Are you sure that you want to delete your account?
              </div>
          }
          primaryAction={{onClick: ()=>{console.log('primAction')}, label:'Ok'}}
          secondaryAction={{onClick: ()=>{console.log('secondaryAction')}, label:'Cancel'}}
          tertiaryAction={{onClick: ()=>{console.log('tertiaryAction')}, label:'Switch Account'}}
          hint="Some hint that you woould like to read, once that modal is open"
        />
      </div>
    )}
  </Switch>
</div>;