Toast — API Reference

Imperative API

The fluix object is the primary way to create toasts. Import it from any adapter package.

Method	Signature	Returns	Description
`fluix.success()`	`(options: FluixToastOptions) => string`	Toast ID	Show a success toast
`fluix.error()`	`(options: FluixToastOptions) => string`	Toast ID	Show an error toast
`fluix.warning()`	`(options: FluixToastOptions) => string`	Toast ID	Show a warning toast
`fluix.info()`	`(options: FluixToastOptions) => string`	Toast ID	Show an info toast
`fluix.action()`	`(options: FluixToastOptions) => string`	Toast ID	Show a toast with action button
`fluix.promise()`	`<T>(promise: Promise<T>, options: FluixToastPromiseOptions<T>) => Promise<T>`	Promise	Show loading → success/error
`fluix.dismiss()`	`(id: string) => void`	—	Dismiss a specific toast
`fluix.clear()`	`(position?: FluixPosition) => void`	—	Clear all toasts, optionally by position

Options passed to fluix.success(), fluix.error(), etc.

Property	Type	Default	Description
`id`	`string`	auto-generated	Unique toast ID. If omitted, uses a shared ID (replaces previous toast).
`title`	`string`	—	Toast headline text
`description`	`unknown`	—	Body content. React accepts JSX, others accept strings/HTML.
`position`	`FluixPosition`	Toaster default	Override the Toaster’s default position
`duration`	`number \| null`	`6000`	Auto-dismiss delay in ms. `null` = persistent.
`icon`	`unknown`	Default state icon	Custom icon. Pass a string emoji or framework element.
`theme`	`"light" \| "dark"`	`"light"`	Toast color theme
`fill`	`string`	`"#FFFFFF"`	CSS color for the toast background
`roundness`	`number`	`16`	Border radius / gooey blur factor
`autopilot`	`boolean \| { expand?: number; collapse?: number }`	—	Auto expand/collapse behavior
`button`	`FluixToastButton`	—	Action button configuration
`styles`	`FluixToastStyles`	—	CSS class overrides for sub-elements

Property	Type	Description
`title`	`string`	Button text
`onClick`	`() => void`	Click handler

CSS class overrides added to sub-elements (additive, does not replace default styles).

Property	Type	Description
`title`	`string`	Class for the title element
`description`	`string`	Class for the description element
`badge`	`string`	Class for the icon badge
`button`	`string`	Class for the action button

Options for fluix.promise().

Property	Type	Description
`loading`	`Pick<FluixToastOptions, "title" \| "icon">`	Options shown during loading state
`success`	`FluixToastOptions \| ((data: T) => FluixToastOptions)`	Options on resolve (static or callback)
`error`	`FluixToastOptions \| ((err: unknown) => FluixToastOptions)`	Options on reject (static or callback)
`position`	`FluixPosition`	Position for the promise toast

Configuration object for the Toaster component.

Property	Type	Default	Description
`position`	`FluixPosition`	`"top-right"`	Default position for all toasts
`layout`	`"stack" \| "notch"`	`"stack"`	Layout mode
`offset`	`number \| string \| FluixOffsetConfig`	—	Viewport offset. Number (px), string (“1rem”), or per-side object.
`defaults`	`Partial<FluixToastOptions>`	—	Default options merged into every toast

type FluixPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

type FluixToastState = "success" | "loading" | "error" | "warning" | "info" | "action";