Dialog

Native dialog. Open it with the Invoker Commands API ( command="show-modal" + commandfor) and close it with form method="dialog" — no extra script.

DialogExamples.tsrx
import { Button, Dialog } from "@octaneui/core";

export function DialogExamples() @{
  <>
    <Button command="show-modal" commandfor="demo-dialog">
      Open dialog
    </Button>
    <Dialog id="demo-dialog" aria-labelledby="demo-dialog-title">
      <h2 id="demo-dialog-title" class="dialog-title">
        Discard draft?
      </h2>
      <p class="dialog-copy">
        This cannot be undone. Your unpublished changes will be lost.
      </p>
      <div class="dialog-actions">
        <form method="dialog">
          <Button type="submit">Cancel</Button>
        </form>
        <form method="dialog">
          <Button type="submit">Discard</Button>
        </form>
      </div>
    </Dialog>
  </>
}