Skip to content

Getting Started

Terminal window
npm install @capgo/capacitor-pretty-toast
npx cap sync
import { toast } from '@capgo/capacitor-pretty-toast';
toast.success('Saved', {
message: 'Your changes are ready.',
});
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);
await toast.promise(uploadFile(), {
loading: {
title: 'Uploading',
message: 'Keep the app open while the file is sent.',
},
success: 'Uploaded',
error: 'Upload failed',
});

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.

If you are using Getting Started to plan native plugin work, connect it with Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Adding or Updating Plugins for the implementation detail in Adding or Updating Plugins, Ionic Enterprise Plugin Alternatives for the product workflow in Ionic Enterprise Plugin Alternatives, and Capgo Native Builds for the product workflow in Capgo Native Builds.