Getting Started

Copy a setup prompt with the install steps and the full markdown guide for this plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-pretty-toast`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/pretty-toast/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Install

npm install @capgo/capacitor-pretty-toast
npx cap sync

Import

import { toast } from '@capgo/capacitor-pretty-toast';

Show A Toast

toast.success('Saved', {
  message: 'Your changes are ready.',
});

Update A Loading Toast

const id = toast.loading('Uploading', {
  message: 'Waiting for the server response.',
});

setTimeout(() => {
  toast.update(id, {
    title: 'Upload complete',
    message: 'The file was stored successfully.',
    icon: 'checkmark.circle.fill',
    autoDismiss: true,
  });
}, 1500);

Track A Promise

await toast.promise(uploadFile(), {
  loading: {
    title: 'Uploading',
    message: 'Keep the app open while the file is sent.',
  },
  success: 'Uploaded',
  error: 'Upload failed',
});

Icons And Images

Use icon for a symbol name or raw SVG markup:

toast.info('New message', {
  icon: 'message.fill',
  message: 'Open the inbox to reply.',
});

Use iconSource for URI-like images. It supports https://, http://, file://, data:, blob:, absolute file paths, or { uri }.

toast.show({
  title: 'Profile updated',
  message: 'Your avatar changed.',
  iconSource: 'https://example.com/avatar.png',
});

iconSource takes precedence over icon.