Toast

Toast notifications. Call them from anywhere through the toast manager; render one Toaster (already included in AppLayout).

Types & positions

Types & positions

Vue

<div>
  <div class="thl-demo-row"><ThlButton variant="success" @click="toast.success('Saved successfully')">success</ThlButton><ThlButton variant="info" @click="toast.info('FYI', { title: 'Info' })">info</ThlButton><ThlButton variant="warning" @click="toast.warning('Careful')">warning</ThlButton><ThlButton variant="danger" @click="toast.error('Failed', { duration: 0 })">error (sticky)</ThlButton></div>
  <div class="thl-demo-row"><ThlButton v-for="p in positions" :key="p" size="sm" outline variant="primary" @click="toast.show({ message: p, position: p })">{{ p }}</ThlButton></div>
</div>

React

import { useToast } from '@thl-ui/react';
const toast = useToast();
toast.success('Saved successfully');
toast.info('FYI', { title: 'Info' });
toast.error('Failed', { duration: 0 });           // sticky
toast.show({ message: 'Hi', position: 'bottom-left', icon: 'bell' });

Angular

import { ThlToastService } from '@thl-ui/angular';
readonly toast = inject(ThlToastService);
this.toast.success('Saved successfully');
this.toast.error('Failed', { duration: 0 });
this.toast.show({ message: 'Hi', position: 'bottom-left' });

Options

Option	Type	Default
message	string	—
title	string	—
type	'success' | 'info' | 'warning' | 'error' | 'default'	'default'
duration	number (ms, 0 = sticky)	components.Toast.duration (3500)
position	top-right · top-left · bottom-right · bottom-left · top-center · bottom-center	components.Toast.position
icon	icon name	by type
closable	boolean	true

max (default 5) limits visible toasts per position. Outside AppLayout, render <Toaster/> / <ThlToaster/> / <thl-toaster/> once.

API

Toaster

<ThlToaster> · import { ThlToaster } from '@thl-ui/vue'

Prop	Type	Default