function Example() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal
        actions={[
          { text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
          { text: 'Apply', onClick: () => setIsOpen(false) },
        ]}
        header="Modal Title"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        closeOnEscKey={true}
        closeOnClickOutside={false}
      >
        <Text>
          Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt pariatur. Nulla
          sunt ipsum do eu consectetur exercitation occaecat labore aliqua. Aute elit occaecat esse ea fugiat
          esse. Reprehenderit sunt ea ea mollit commodo tempor amet fugiat.
        </Text>
        <Text>
          Esse ipsum est consectetur nulla aute deserunt. Anim sint nisi consequat officia adipisicing irure.
          Nulla ea reprehenderit elit eu nostrud sunt veniam dolore ex occaecat qui. Commodo ullamco ut sint dolor
          quis cillum in et enim culpa esse exercitation ad. Eiusmod adipisicing nisi culpa esse laborum cupidatat
          ad pariatur proident. Consectetur ex sint ullamco non ex.
        </Text>
      </Modal>
    </>
  );
}

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
      <Modal
        actions={[
          { text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
          { text: 'Apply', onClick: () => setIsOpen(false) },
        ]}
        header="Dialog Title"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        closeOnEscKey={true}
        closeOnClickOutside={false}
        variant="dialog"
      >
        <Text>
          Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt pariatur.
        </Text>
      </Modal>
    </>
  );
}