Module Solidtype_heroui.Toast

HeroUI's Toast: brief messages shown in a stack, on Kobalte's toast region, its list and its toasts, with HeroUI's classes from Styles.Toast. A Provider, rendered once at the root of the page, shows the toasts a queue holds; show and its kin add, change and close them, from anywhere.

  <Toast.Provider />
  ...
  let key = Toast.show ~description:"Your event is set" "Event created" in
  Toast.update key ~variant:`success "Event saved"

The stack is HeroUI's: the newest toast in front, those behind it smaller and offset, at most max_visible_toasts of them shown, and all of them laid out apart while the stack is hovered or holds the focus, which also pauses every toast's countdown, as does the page while it is hidden. Alt and T, its hotkey, moves the focus to it; Escape folds it. A toast closing stays for its exit, data-exiting, before it is gone.

type key

A toast, as its queue knows it.

type variant = [
  1. | `default
  2. | `accent
  3. | `success
  4. | `warning
  5. | `danger
]
type indicator =
  1. | Variant_icon
    (*

    The variant's own icon, HeroUI's.

    *)
  2. | Icon of Solidtype.Jsx.element
    (*

    An icon of the caller's.

    *)
  3. | No_icon
    (*

    None at all.

    *)
type action

A button a toast offers, beside its text.

val action : ?variant: [ `primary | `secondary | `tertiary | `outline | `ghost | `danger | `danger_soft ] -> ?class_:string -> on_press:(unit -> unit) -> string -> action

action ~on_press label is a button labelled label that calls on_press, `tertiary unless variant says otherwise, class_ added after HeroUI's classes, as React's actionProps' className is.

module Queue : sig ... end

Toasts, held in order, the newest first, each until it is closed.

val show : ?queue:Queue.t -> ?description:string -> ?variant:variant -> ?indicator:indicator -> ?action:action -> ?is_loading:bool -> ?timeout_ms:float -> ?on_close:(unit -> unit) -> string -> key

show title adds a toast titled title to queue and is its key. It closes itself after timeout_ms, 4000 by default, or stays while that is 0.; on_close is called as it begins to close. While is_loading, its indicator is a spinner.

val success : ?queue:Queue.t -> ?description:string -> ?indicator:indicator -> ?action:action -> ?timeout_ms:float -> ?on_close:(unit -> unit) -> string -> key

show of the `success variant.

val info : ?queue:Queue.t -> ?description:string -> ?indicator:indicator -> ?action:action -> ?timeout_ms:float -> ?on_close:(unit -> unit) -> string -> key

show of the `accent variant, as HeroUI's toast.info.

val warning : ?queue:Queue.t -> ?description:string -> ?indicator:indicator -> ?action:action -> ?timeout_ms:float -> ?on_close:(unit -> unit) -> string -> key
val danger : ?queue:Queue.t -> ?description:string -> ?indicator:indicator -> ?action:action -> ?timeout_ms:float -> ?on_close:(unit -> unit) -> string -> key
val update : ?queue:Queue.t -> ?description:string -> ?variant:variant -> ?indicator:indicator -> ?action:action -> ?is_loading:bool -> ?timeout_ms:float -> ?on_close:(unit -> unit) -> key -> string -> key

update key title changes the toast in place, keeping its place in the stack, and is its key; what it does not name stays as it was, and a timeout_ms given starts its countdown anew. A toast already closed is shown again, as show would, under a new key.

val promise : ?queue:Queue.t -> 'a Js.Promise.t -> loading:string -> success:('a -> string) -> error:(Js.Promise.error -> string) -> key

promise p ~loading ~success ~error shows loading with a spinner, kept open, and changes it in place as p settles: to success of its value, a `success toast, or to error of why it failed, a `danger one, each then closing itself after 4000 ms.

val close : ?queue:Queue.t -> key -> unit

Closes the toast, its exit played, on_close called as it begins.

val clear : ?queue:Queue.t -> unit -> unit

Closes every toast.

val pause_all : ?queue:Queue.t -> unit -> unit

Holds every toast's countdown until resume_all.

val resume_all : ?queue:Queue.t -> unit -> unit
type queued

A toast as a Provider's render function is given it.

val key : queued -> key
val title : queued -> string
val description : queued -> string option
val toast_variant : queued -> variant
val is_loading : queued -> bool
module Indicator : sig ... end

A toast's icon: the variant's own, HeroUI's, or its children.

module Content : sig ... end

What holds a toast's title and description.

module Title : sig ... end

A toast's title, Kobalte's, which names it.

module Description : sig ... end

A toast's description, Kobalte's, which describes it.

module Action_button : sig ... end

The button a toast offers, HeroUI's Button, small.

module Close_button : sig ... end

HeroUI's Close_button, which closes the toast its key names.

module Props : sig ... end

A toast of a Provider's stack, Kobalte's, given the toast its render function was given: its place in the stack and its state, as HeroUI's styles lay it out.

module Provider : sig ... end

The region the toasts are shown in, Kobalte's, with its list: render it once, at the root of the page. Its children, given each toast, render it, HeroUI's own toast by default.