Overlay | Arbol UI

Language

Appearance

Dialog with a form

Rendered while open: type something, then press Esc or Cancel to see the discard question. Save leaves without asking.

import { useState } from 'react';
import { Button, Overlay, OverlayBody, OverlayDescription, OverlayFooter, OverlayHeader, OverlayTitle, TextField } from '@arbol-ai/ui';

const FormDialogExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button
        onPress={() => {
          setIsOpen(true);
        }}
      >
        New contact
      </Button>
      {isOpen ? (
        <Overlay
          onClose={() => {
            setIsOpen(false);
          }}
        >
          {(close, leave) => (
            <form
              className="flex min-h-0 flex-1 flex-col"
              onSubmit={(event) => {
                event.preventDefault();
                leave();
              }}
            >
              <OverlayHeader>
                <OverlayTitle>New contact</OverlayTitle>
                <OverlayDescription>They join the contact list and can receive campaigns.</OverlayDescription>
              </OverlayHeader>
              <OverlayBody>
                <TextField autoFocus label="Name" />
                <TextField label="Phone" type="tel" />
              </OverlayBody>
              <OverlayFooter>
                <Button onPress={close} variant="outline">
                  Cancel
                </Button>
                <Button type="submit">Save contact</Button>
              </OverlayFooter>
            </form>
          )}
        </Overlay>
      ) : null}
    </>
  );
};

<FormDialogExample />

Side sheet from a trigger

A record in context, opened by OverlayTrigger; focus returns to the button.

import { Button, Overlay, OverlayBody, OverlayDescription, OverlayFooter, OverlayHeader, OverlayTitle, OverlayTrigger } from '@arbol-ai/ui';

<OverlayTrigger>
  <Button variant="outline">Open appointment</Button>
  <Overlay dirty={false} kind="sheet">
    <OverlayHeader>
      <OverlayTitle>Thursday 10:30, Ana Torres</OverlayTitle>
      <OverlayDescription>General check-up with Dr. Ruiz.</OverlayDescription>
    </OverlayHeader>
    <OverlayBody>
      <p className="text-sm">Confirmed by WhatsApp yesterday at 6:12 pm.</p>
    </OverlayBody>
    <OverlayFooter>
      <Button>Register arrival</Button>
    </OverlayFooter>
  </Overlay>
</OverlayTrigger>

Source

The examples above are src/components/overlay/overlay.examples.tsx, which the library’s tests render too.