Toast

Ephemeral feedback notification. Auto-dismissing with aria-live.

Examples

Trigger default, success, error, and action toasts. Toasts auto-dismiss after 4 s.

Warning variant for caution or threshold alerts. Uses warning colour tokens.

Title and description layout for richer notifications. Title inherits the variant colour, description uses secondary text.

Toast that stays until the user explicitly dismisses or takes action. No auto-dismiss timer.

Choose where toasts appear along the bottom edge. Select a position and trigger a toast to see it.

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { Toast } from "@rokle/components";

import { Toast } from "@rokle/components";

export function Example() {
  return <Toast />;
}

Prop	Type	Default	Description
title	string	-	Optional bold heading above the message.
message	string	-	Notification text.
variant	"default" \| "success" \| "error" \| "warning"	"default"	Visual style.
duration	number	4000	Auto-dismiss time in ms. Set persistent: true to disable.
persistent	boolean	false	When true, toast stays until manually dismissed.
position	"bottom-right" \| "bottom-center" \| "bottom-left"	"bottom-right"	Screen position for the toast container.