Dialog

A destructive-action confirmation that demonstrates the complete Dialog composition.

Package: @solidiom/dialog
Version: 0.0.1-next.0
Status: stable

Examples

The live example uses a confirmation action because it needs a clear title, an explanation of the consequence, and an explicit dismissal path. Press Escape, select Cancel, or select Delete workspace to close it. No data is changed.

The trigger restores focus after dismissal. The visual treatment inherits the site’s light and dark semantic tokens rather than embedding theme values in the example.

View source

        export function DialogExample(props: DialogExampleProps) {
  const copy = () => COPY[props.locale]

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="dialog-example"
      data-dialog-example
    >
      <Dialog.Root>
        <Dialog.Trigger>
          <span class="dialog-example__trigger">{copy().trigger}</span>
        </Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Backdrop class="dialog-example__backdrop" />
          <Dialog.Content class="dialog-example__content">
            <Dialog.Title class="dialog-example__title">{copy().title}</Dialog.Title>
            <Dialog.Description class="dialog-example__description">
              {copy().description}
            </Dialog.Description>
            <div class="dialog-example__actions">
              <Dialog.Close>
                <span class="dialog-example__button dialog-example__button--secondary">
                  {copy().cancel}
                </span>
              </Dialog.Close>
              <Dialog.Close>
                <span class="dialog-example__button dialog-example__button--danger">
                  {copy().confirm}
                </span>
              </Dialog.Close>
            </div>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>
  )
}