stdf/docs/mds/components/feedback/guide_en.md

Introduction

The functional feedback API allows you to use Toast, Dialog, Modal, Alert, and Loading components through function calls anywhere (including non-Svelte component code).

This is particularly useful in the following scenarios:

• Encapsulating global request interceptors
• Displaying prompts in utility functions
• Showing feedback based on async operation results

Differences from Component Style

Feature	Functional API	Component Style
Usage Location	Any JS/TS code	Only Svelte component templates
Custom Content	Text only	Supports Snippet
Two-way Binding	Not supported	Supports bind:visible
State Management	Automatic	Manual
Complex Interactions	Limited	Fully supported

When to Use Functional API

Recommended for Functional API:

• Simple text prompts
• Request success/failure feedback
• Confirmation operations (delete, submit, etc.)
• Global loading state

Recommended for Component Style:

• Custom content needed (icons, buttons, layouts)
• Complex interaction logic
• Fine-grained control over display state

Multiple Instances

Toast and Alert support displaying multiple instances simultaneously, automatically stacking:

// Rapid consecutive calls will stack
toast.success('First');
toast.info('Second');
toast.warning('Third');

Dialog, Modal, and Loading are singleton mode - new calls will replace previous ones.

Working with Promises

Dialog and Modal return Promises, making them convenient to use with async/await:

async function handleDelete() {
    const confirmed = await dialog.confirm('Confirm delete?');
    if (!confirmed) return;

    loading.show('Deleting...');
    await deleteApi();
    loading.hide();

    toast.success('Deleted successfully');
}

Language Configuration

The functional API automatically gets language configuration from the app's Context (STDF_lang). For manual setting:

import { setFeedbackLang } from 'stdf';
import { en_US } from 'stdf/lang';

setFeedbackLang(en_US);

Mixed Usage

Functional API and component style can be mixed in the same project:

<script>
    import { Toast, dialog, loading } from 'stdf';

    let showCustomToast = $state(false);

    async function handleAction() {
        // Using functional API
        const confirmed = await dialog.confirm('Confirm action?');
        if (confirmed) {
            loading.show();
            await doSomething();
            loading.hide();
        }
    }
</script>

<!-- Use component style when custom content is needed -->
<Toast bind:visible={showCustomToast}>
    <div class="flex items-center gap-2">
        <CustomIcon />
        <span>Custom content</span>
    </div>
</Toast>

<button onclick={handleAction}>Execute Action</button>
<button onclick={() => showCustomToast = true}>Show Custom Toast</button>