Dialog
A modal surface for focused tasks like creating or deleting an agent. Four widths, an optional tinted icon header, three header alignments and three footer layouts — all additive, so the plain dialog below is unchanged by any of it. A scrollable mode hands padding down to the slots so a long body can scroll under a header and footer that stay put.
import {
Dialog, DialogTrigger, DialogContent, DialogHeader, DialogHeaderText,
DialogMedia, DialogTitle, DialogDescription, DialogBody, DialogFooter,
DialogIllustration, DialogClose,
} from "@pestoui/core"Create agent
Tone and icon
DialogMedia is a squircle tile for a header glyph, and tone is the only thing tone touches — the copy and the panel stay neutral, the same way Alert and Banner tint. It is always a tint over a hairline ring, never a solid fill. brand is the selected green rather than the lime: the lime is a CTA fill, far too light to carry a glyph or a ring at this size. info is strictly informational — never use it to say something is chosen or on. Warning runs one notch heavier than its siblings because its swatch is the lightest of the set.
Header alignment
Alignment is an explicit choice, not a by-product of size and breakpoint. start is the default reading column. center is for a single moment of news — a confirmation, a result — where the tile sits above the title. lead puts the tile in a leading column, which is the one alignment that needs DialogHeaderText: it groups the title and the description into one flex child beside the tile instead of leaving them as siblings of it.
Sizes
Width only. Every size keeps the same padding, radius and entrance, and all of them cap at the viewport minus a gutter on small screens, so the axis never becomes a mobile layout decision.
Scrollable body
Pass scrollable and the panel becomes a capped flex column: DialogBody takes over padding and overflow and can shrink below its own content, while the header and footer stay put and grow a hairline against the scroll. A column rather than a fixed row template on purpose — a template has to name every row up front, so adding an illustration would silently promote the header into the flexible row. In the default layout DialogBody is inert, so wrapping content in it costs nothing.
Form in a modal
The everyday case: a lead-aligned header, Field rows in the body, and a split footer that pushes the escape route to the far edge and the commit to the other. Use split when one action is a way out rather than a lesser choice; use stacked when the two choices really do carry the same weight; leave it at end for the ordinary cancel-and-confirm pair.
Illustration header
A full-bleed media band at the top of the panel. In the default layout it cancels the panel padding with negative margins; in the scrollable layout there is no padding to cancel, so it only clips. Overflow lives on the wrapper rather than the image, and the top corners track the panel radius — an unclipped corner shows through immediately. The close button notices it is sitting over media and earns a translucent chip, since a ghost button over an illustration has no surface to sit on.
Props
Pesto UI · 117 documented components