Toasts and Confetti

by Erick Engelke
May 19, 2025

Sometimes you want to add accents to a web applicaiton. Toasts and Confetti are just that.

To see them in action, check out this exmaple link and click on Toasts and Confetti buttons on the Interctive section.

Toasts are little temporary messages which are displayed on the screen. You can adjust the color, any icons, the message and how the display is animated onto the screen.

First, we create a toastpane, which will be the vertical column holding the toasts we display.

uses nicetoast, ...

procedure TFormtoast.FormtoastShow(Sender: TObject);
begin
   //
   toastpane := TToastPane.Create( self );
end;

Adding toasts is easy. Here we’ll add three at a time.

procedure TFormtoast.Button1Click(Sender: TObject);
var
  col : TCOlor;
begin
  //
  inc( toastindex );
  if toastindex mod 2 = 1 then col := clPink
  else col := clLightBlue;

  // the first arguemnt to addToast is an optional 30 pixel wide HTML line, it can bit a gif (animated), jpeg, png, etc. eg '<img src="x.gif">'

  // the second argument is text to display
  // the third is an optional way to animate the display
  // the fourth is the colour for the background

  toastpane.addToast(
     '<img width=30 src="pdfimages/loading-icon.gif">',
     'message FADE blah blah blah blah blah '+ IntToStr( toastIndex ),
     taFade, col);

  toastpane.addToast('',
     'message SPRAY blah blah blah blah blah '+ IntToStr( toastIndex ),
     taSpray, col );

  toastpane.addToast('',
     'message QUICK blah blah blah blah blah '+ IntToStr( toastIndex ),
     taQuick, col );
end;

The first example loads a GIF file which will display an animated icon. You can also load Jpeg, PNG and other files, but you are limited to 30 pixels wide.

For confetti, you can display normal confetti, or letters, numbers and symbols, or you can display unicode characters.

use niceconfettieffect,...

procedure TFormConfetti.FormConfettiShow(Sender: TObject);
begin
   confetti := TNiceConfetti.Create;
end;

procedure TFormConfetti.Button1Click(Sender: TObject);
begin
   confetti.emojis := '';
   confetti.showconfetti;
end;

procedure TFormConfetti.Button2Click(Sender: TObject);
begin
   confetti.emojis := 'FUN';
   confetti.showconfetti;

end;

procedure TFormConfetti.Button3Click(Sender: TObject);
begin
   confetti.emojis :=  ['🌈', '⚡️', '💥', '✨', '💫', '🌸'];
   confetti.showconfetti;
end;