One Dialog

Buttons

About

Dialog primitive with 20 variants covering the daliagents.com console surfaces - go-live confirms, Agent Care upsell and cancel, invites, OTP verification, dashboard sharing, and engagement terms for Dali Agents.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds One Dialog to your project and fits it to your theme.

Code

How One Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CircleAlertIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'

export function Dialog01() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Set agent live</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <div className="flex flex-col gap-3">
            <div className="bg-muted flex size-10 items-center justify-center rounded-full">
              <CircleAlertIcon />
            </div>
            <div className="flex flex-col gap-2">
              <DialogTitle>Set this agent live?</DialogTitle>
              <DialogDescription>
                Your agent starts handling real work the moment it goes live.
                You can roll back to the previous version from the Dali console.
              </DialogDescription>
            </div>
          </div>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button>Set live</Button>
        </DialogFooter>
        <a
          href="https://daliagents.com"
          target="_blank"
          rel="noreferrer"
          className="text-muted-foreground/60 hover:text-muted-foreground mx-auto text-[10px] tracking-wide transition-colors"
        >
          daliagents.com
        </a>
      </DialogContent>
    </Dialog>
  )
}

export default Dialog01