modal

import { Modal } from "woly";

Modal component is used for creating dialogs.

Modal Example

Change customer
<Playground>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <>
        <Button icon={<IconSearch />} onClick={change} text="Click on me" priority="primary" />
        <Modal visible={value} title="Change customer" onClose={change} priority="primary">
          <form autoComplete="off">
            <Field label="Customer name">
              <Input
                priority="primary"
                name="name"
                onChange={(event) => console.info('On name change')}
                placeholder="Name"
                type="text"
              />
            </Field>
            <Field label="Customer email">
              <Input
                priority="primary"
                name="email"
                onChange={(event) => console.info('On email change')}
                placeholder="Email"
                type="text"
              />
            </Field>
            <Checkbox checked={true} text="Accept all cookies" />
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button onClick={() => alert('Change clicked!')} text="Change" priority="primary" />
              <Button onClick={change} text="Cancel" priority="primary" outlined />
            </div>
          </form>
        </Modal>
      </>
    )}
  </State>
</Playground>

Props

NameTypeDefaultDescription
childrenReact.ReactNodeModal content
onCloseReact.EventHandler<React.SyntheticEvent>Event handler on modal close
prioritystring'secondary'Priority prop to style Modal component
titlestringTitle of modal
visiblebooleanfalseSet initial visibility of Modal