Toast

Toast adalah komponen yang digunakan untuk memberikan pesan singkat yang muncul sementara di layar untuk memberikan umpan balik instan kepada pengguna.

Komponen ini digunakan untuk mengonfirmasi tindakan yang baru saja dilakukan atau untuk memberi tahu pengguna tentang status sistem, seperti keberhasilan, kesalahan, atau informasi penting lainnya.

Toast muncul secara otomatis, sehingga tidak mengganggu konteks halaman dan akan menghilang setelah beberapa detik. Meski bersifat non-intrusif, toast tetap dapat menyertakan opsi tambahan seperti tombol untuk aksi pembatalan cepat.

Penggunaan

Gunakan Toast untuk menyampaikan informasi ringan dan sementara tanpa mengganggu interaksi utama pengguna.

Komponen ini efektif untuk memberi tahu hasil tindakan, status sistem, atau kesalahan kecil yang tidak memerlukan tindak lanjut langsung.

Global Provider Integration

Global Provider Setup

Untuk menggunakan Toast secara global, bungkus aplikasi Anda dengan ToastProvider di level root (misalnya di main.tsx atau App.vue). Ini memungkinkan Toast dipanggil dari komponen anak mana pun tanpa perlu render komponen Toast manual.

React

import { ToastProvider, setBrandTheme } from '@idds/react';
import { createRoot } from 'react-dom/client';
import App from './App';
import '@idds/react/index.css';

// Set brand theme
setBrandTheme('panrb');

createRoot(document.getElementById('root')!).render(
  <ToastProvider>
    <App />
  </ToastProvider>
);

Vue

<template>
  <ToastProvider>
    <router-view />
  </ToastProvider>
</template>

<script setup lang="ts">
import { ToastProvider } from '@idds/vue';
import '@idds/vue/index.css';
</script>

Penggunaan (useToast Hook)

Gunakan hook useToast (React) atau composable useToast (Vue) di dalam komponen child untuk memicu notifikasi.

React

import { useToast, Button } from '@idds/react';

export default function MyComponent() {
  const { toast } = useToast();

  const handleShowToast = () => {
    toast({
      state: 'positive',
      title: 'Berhasil',
      description: 'Data berhasil disimpan',
      duration: 3000,
    });
  };

  return <Button onClick={handleShowToast}>Show Toast</Button>;
}

Live Preview:

Vue

<script setup lang="ts">
import { useToast, Button } from '@idds/vue';

const { toast } = useToast();

const handleShowToast = () => {
  toast({
    state: 'positive',
    title: 'Berhasil',
    description: 'Data berhasil disimpan',
    duration: 3000,
  });
};
</script>

<template>
  <Button @click="handleShowToast">Show Toast</Button>
</template>

Anatomi

State (keadaan)

Neutral

Menampilkan pesan informasi umum, seperti notifikasi ringan atau konfirmasi sederhana.

Contoh: “Link copied to clipboard.”

Positif

Menampilkan umpan balik positif untuk tindakan yang berhasil diselesaikan.

Contoh: “Data saved successfully.”

Error

Menampilkan pesan kesalahan atau peringatan ketika tindakan gagal atau terjadi masalah sistem.

Contoh: “Oops! Something went wrong.”

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan toast untuk pesan ringan yang bersifat sementara.

❌ Dihindari

Hindari penggunaan toast untuk pesan kritis yang membutuhkan konfirmasi pengguna.

✅ Disarankan

Batasi satu toast aktif dalam satu waktu agar pengguna tidak kehilangan fokus.

❌ Dihindari

Jangan menampilkan terlalu banyak toast secara bersamaan.

✅ Disarankan

Pastikan teksnya singkat, jelas, dan langsung ke inti informasi.

❌ Dihindari

Hindari pesan yang terlalu panjang atau ambigu.

Penerapan

Halaman Kompetensi

Pada halaman kompetensi, toast digunakan untuk memberikan umpan balik instan kepada pengguna saat mereka melakukan pembaruan data, seperti menambah atau memperbarui riwayat pelatihan, tanpa mengganggu alur kerja utama.

Spesifikasi