Dialog — Wildeye Design System

Try it

Open it, change its width, then close it with Escape, the scrim or a button. Focus goes back to Edit site.

md · 448px

Size

Delete slot

Grey canvas

<WildDialog
  title="Edit site"
  size="md"
  footerLeft={<WildButton variant="destructive">Delete site</WildButton>}
  footer={
    <>
      <WildButton variant="secondary">Cancel</WildButton>
      <WildButton>Save changes</WildButton>
    </>
  }
  onClose={close}
>
  <WildFormField label="Site name">…</WildFormField>
</WildDialog>

When to use

Use a dialog for a short task that has to be finished or cancelled first, such as editing a site.
Use one dialog at a time. Never open a second on top of the first.

Don’t use it

To confirm a delete. Use a Confirm dialog.
For a message that needs no answer. Use a Toast.
For a long form people fill in beside the page. Use a Drawer.

Anatomy

A title with a close button, the body, and a footer. The footer’s left slot holds the destructive action, away from the primary.

<WildDialog title="Edit site" size="md" @close="close">
  <WildFormField label="Site name"> … </WildFormField>
  <template #footer>
    <WildButton variant="secondary">Cancel</WildButton>
    <WildButton>Save changes</WildButton>
  </template>
</WildDialog>

Point at the ×: it fills a grey circle on hover and a darker one when pressed. Keep it even when the footer has Cancel.

Widths

Four, each tied to a kind of task. Pick by the task, not by how much text there is.

sm · 384 · Confirm and destroy

md · 448 · A short form

lg · 672 · A form with two columns

xl · 896 · Alarm configuration

Content

Title it with the task, in sentence case: Edit site, Invite people.
Label the primary button with the verb from the title: Save changes, Send invites.
Keep the body to what the task needs. A form that scrolls belongs on a page.

Accessibility

Move focus into the dialog when it opens, and back to the button that opened it when it closes. The × is a button named “Close dialog”.

Key	What it does
Tab	Moves between the dialog’s controls, and stays inside it.
Escape	Closes it, the same as Cancel.

Props

Prop	Type	Default	Description
title	string	—	The task, shown in the header.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Width: 384, 448, 672 or 896px.
footer	slot	—	The actions, right-aligned.
footerLeft	slot	—	The destructive action, or a footer control.
canvas	boolean	false	Grey body, for white cards inside.
@close	() => void	—	Draws the × and handles it.

Tokens

Token	Value	Where it lands
--radius-3xl	16px	The dialog corner.
--dialog-overlay	rgba(10, 9, 11, 0.5)	The scrim.
--shadow-xl	0 20px 25px -5px …, 0 10px 10px -5px …	Elevation.
--z-index-modal	500	Above dropdowns; below popovers and toasts.
--color-bg-elevated	#FFFFFF	The surface.
--global-neutral-grey-400	#ECECED	Header and footer rules; × pressed.
--global-neutral-grey-300	#F1F1F1	The × circle on hover.
--global-neutral-grey-900 / 1100	#7F7D83 / #2D2B32	The × at rest, then on hover.