Dialog API

The Dialog API lets your Tauri application open the operating system's own file picker, folder chooser, save dialogs, and message boxes. Instead of building custom HTML modals that never quite match the platform feel, you tap into the same dialogs users already know from Finder, Explorer, or their Linux desktop.

Tauri v2 ships this functionality through the tauri-plugin-dialog plugin. You can invoke dialogs from your React frontend with JavaScript, or from your Rust backend. Both paths hit the same native windows — the choice comes down to where you want the logic to live.

Setting up the Dialog plugin

Every Tauri v2 plugin follows the same three-part installation: add the Rust dependency, register it in your app, and install the frontend package. Dialogs also require a permission entry in your capability file.

cargo add tauri-plugin-dialog

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

npm install @tauri-apps/plugin-dialog

{
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "dialog:allow-open",
    "dialog:allow-save",
    "dialog:allow-message",
    "dialog:allow-ask",
    "dialog:allow-confirm"
  ]
}

After these four steps, your project can open native dialogs. The remaining sections cover each dialog type with examples you can paste into your React app.

File dialogs

A file dialog lets the user pick one or more existing files from their local file system. You control which file types appear, whether multiple selection is allowed, and where the dialog starts browsing.

import { useState } from "react";
import { open } from "@tauri-apps/plugin-dialog";
function App() {
  const [filePath, setFilePath] = useState<string | null>(null);
  async function pickImage() {
    const selected = await open({
      title: "Choose an image",
      multiple: false,
      filters: [
        {
          name: "Images",
          extensions: ["png", "jpg", "jpeg", "webp"],
        },
      ],
    });
    if (selected && typeof selected === "string") {
      setFilePath(selected);
    }
  }
  return (
    <div>
      <button onClick={pickImage}>Select Image</button>
      {filePath && <p>Selected: {filePath}</p>}
    </div>
  );
}
export default App;

Folder dialogs

A folder dialog prompts the user to pick a directory. The mechanics are nearly identical to file dialogs — you set directory: true in the options or call pick_folder instead of pick_file.

import { open } from "@tauri-apps/plugin-dialog";
async function pickFolder() {
  const selected = await open({
    directory: true,
    multiple: false,
    title: "Choose a project folder",
  });
  if (selected && typeof selected === "string") {
    console.log("Folder path:", selected);
  }
}

Save dialogs

A save dialog asks the user where a new or overwritten file should go. Unlike an open dialog, the file does not need to exist yet. The return value is a single path string where your application should write the data.

import { save } from "@tauri-apps/plugin-dialog";
async function exportReport() {
  const filePath = await save({
    title: "Export Report",
    defaultPath: "report.pdf",
    filters: [
      { name: "PDF", extensions: ["pdf"] },
      { name: "Text", extensions: ["txt"] },
    ],
  });
  if (filePath) {
    // Write your file content to `filePath`
    console.log("Save location:", filePath);
  }
}

Message dialogs

Message dialogs display information, ask yes/no questions, or request confirmations. They are simpler than file dialogs — you provide the message text and an optional title. The dialog renders with the platform's native look, including system icons for warnings and errors.

Message (info)

A single-button informational dialog. It returns nothing; you await it to know the user dismissed the box.

import { message } from "@tauri-apps/plugin-dialog";
async function showInfo() {
  await message("Export completed successfully.", {
    title: "Export",
    kind: "info",
  });
}

Ask (Yes/No)

An ask dialog presents a question with Yes and No buttons. It resolves to true if the user clicked Yes, false otherwise.

import { ask } from "@tauri-apps/plugin-dialog";
async function deleteItem() {
  const confirmed = await ask(
    "This action cannot be undone. Delete this item?",
    { title: "Confirm Delete", kind: "warning" }
  );
  if (confirmed) {
    // proceed with deletion
  }
}

Confirm (OK/Cancel)

A confirm dialog is similar to ask, but with OK and Cancel buttons. It also resolves to a boolean.

import { confirm } from "@tauri-apps/plugin-dialog";
async function overwriteCheck() {
  const ok = await confirm("A file with this name already exists. Overwrite?", {
    title: "Overwrite",
    kind: "warning",
    okLabel: "Overwrite",
    cancelLabel: "Keep",
  });
  return ok;
}

Best practices

Dialogs are straightforward to use, but a few habits will prevent crashes, permission issues, and a subpar user experience.

Grant the fewest permissions possible. If your app only needs to open files, do not add dialog:allow-save or dialog:allow-message. This reduces the attack surface and makes your capability file easier to audit.

Always check for cancellation. Every dialog function that returns a path can return null. Treat that as the user deliberately refusing to proceed. Do not fall through to file operations without a guard.

Prefer the JavaScript API for UI-driven flows. When a user clicks a button to pick a file, handling the dialog directly in the frontend keeps the interaction close to the trigger. Use the Rust API when the dialog is part of a backend process — for example, prompting for a save location after a long computation.

Combine with file system scopes. A path obtained from a dialog is automatically added to the runtime scope, so the File System API readTextFile or writeTextFile will work without extra permission entries. If you need to access that path after an app restart, persist it with tauri-plugin-persisted-scope.

Use the appropriate dialog type for the task. Message dialogs are for one-way information. Ask dialogs are for decisions with consequences. Confirm dialogs are for irreversible actions. Choosing the correct type aligns with platform conventions and reduces user mistakes.

Do not rely on dialogs for security-critical decisions. The dialog API negotiates file paths, not data. A determined attacker can bypass frontend constraints and invoke file operations directly if you do not validate paths on the Rust side. For sensitive operations, write a dedicated Tauri command that verifies the path before acting on it.

This page covered every dialog type available in Tauri v2: file open, folder selection, save, and the three message variants. The same native windows are available from JavaScript and Rust; the decision of which to use depends on where your interaction originates. With permissions correctly configured and cancellation handled, dialogs give your React app a polished, platform-native way to interact with the file system.