Toast

Learn how to create toasts with CaesarUI.

Installation

To add the toaster component to your project, run the following command:

caesar ui:add toaster

This command will generate the toaster component in the ./views/ui/toaster.templ file.

Usage

Add Toaster to Layout

To start using the toaster component, you need to include it in your layout. Here's an example of how to do this in a shared layout file:

package layouts

import (
	"os"
	"citadel/views/ui"
)

templ SharedLayout() {
	<!DOCTYPE html>
	<html class="bg-zinc-900" lang="en">
        // ...
		<body>
			@ui.Toaster()
			{ children... }
		</body>
	</html>
}

Displaying a Toast from the Backend

You can create different types of toasts (info, success, warning, danger) from the backend. Here's an example of how to display a success toast after updating an application:

package controllers

import (
	"citadel/toast"
	caesar "github.com/caesar-rocks/core"
)

func (c *AppsController) Update(ctx *caesar.CaesarCtx) error {
	// ... application update logic ...

	toast.Success(ctx, "Application updated successfully.")

	return ctx.Render(somePage)
}

In this example, the toast.Success function is used to display a success toast message.

Examples

Success

Preview
Backend Code
Button Code

Info

Preview
Backend Code
Button Code

Warning

Preview
Backend Code
Button Code

Danger

Preview
Backend Code
Button Code

Conclusion

By following these steps, you can set up and use the CaesarUI toaster component to display toasts in your application.

The toaster component is customizable, allowing you to give users immediate feedback for their actions.