Dialog

Valintaikkuna

Modaali vahvistukselle tai lyhyelle tehtävälle.

Käyttöpaikat

Suoraan: palvelu tuo osan itse. Välillisesti: osa tulee mukaan toisen paketin osan kautta, ja sen muutos näkyy palvelussa silti. Laskettu julkaisun yhteydessä 23.10.2026.

TP-IAM

TP-PERUSTUS

TP-VASTAANOTTO

TP-TTK · FormDialogin kautta

Käyttö

Paketin README:n luku sellaisenaan.

Dialog — modaalit

Radix-pohjainen ShadCN-dialog. Käytä lomakkeille ("Lisää toimittaja", "Muokkaa"), vahvistuksille ja tietoformeille.

import {
  Dialog, DialogContent, DialogDescription, DialogFooter,
  DialogHeader, DialogTitle, Button,
} from "@karkkainen/ui";

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Lisää toimittaja</DialogTitle>
      <DialogDescription>
        Perustiedot voi lisätä nyt; kanavat konfiguroidaan yksityiskohtaisesti
        toimittajan omalla sivulla.
      </DialogDescription>
    </DialogHeader>
    {/* … lomake … */}
    <DialogFooter>
      <Button variant="ghost" onClick={() => setOpen(false)}>Peruuta</Button>
      <Button onClick={onSave}>Tallenna</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Konventiot:

Otsikko selkeä imperatiivi: "Lisää X" / "Muokkaa X" / "Poista X".
`DialogFooter` aina vasemmalta oikealle: variant="ghost" (peruuta) + primary. Peruuta ensin — vasen reuna on visuaalisesti "peruuntumis"-suunta.
Ei destruktiivista toimintoa ilman erillistä vahvistusta.

Tuonti ja lähde

import { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "@karkkainen/ui";

src/components/dialog.tsx