Dialog

Displays a modal window over the page with a title, body, and footer actions.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Button, Dialog } from "@aile.sh/elia";

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Revoke key</Button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title="Revoke API key?"
        footer={
          <>
            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
            <Button variant="danger" onClick={() => setOpen(false)}>Revoke</Button>
          </>
        }
      >
        Requests signed with sk-aile-prod will stop working immediately. This can't be undone.
      </Dialog>
    </>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia