Saltar al contenido principal

Toast

A toast is a non-disruptive message that appears temporarily at the edge of the interface to provide quick, at-a-glance feedback to the user. It is a compound component composed of Root, Title, and Description subcomponents.

Toast

Usage

Example
import type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Toast } from "@tiendanube/nube-sdk-jsx";

const ToastComponent = () => (
<Toast.Root duration={3000} variant="success">
<Toast.Title>Success!</Toast.Title>
<Toast.Description>
Your changes have been saved.
</Toast.Description>
</Toast.Root>
);

export function App(nube: NubeSDK) {
nube.send("ui:slot:set", () => ({
ui: {
slots: {
corner_bottom_right: <ToastComponent />,
},
},
}));
}

Available Slots

The Toast component can be rendered in the following UI slots:

  • corner_top_left: Displays the toast in the top-left corner of the interface
  • corner_top_right: Displays the toast in the top-right corner of the interface
  • corner_bottom_left: Displays the toast in the bottom-left corner of the interface
  • corner_bottom_right: Displays the toast in the bottom-right corner of the interface

Subcomponents

Toast.Root

The root container that manages the toast state and appearance.

PropertyTypeRequiredDescription
childrenNubeComponent[]NoTitle and description components.
durationnumberNoTime in milliseconds before the toast disappears.
variant"success"
"error"
"warning"
"info"
NoVisual style variant of the toast.
styleStyleSheetNoCustom styles for the toast root.
idstringNoOptional unique identifier for the component.

Toast.Title

The title component of the toast message.

PropertyTypeRequiredDescription
childrenstringNoText content of the title.
styleStyleSheetNoCustom styles for the title.

Toast.Description

The description component of the toast message.

PropertyTypeRequiredDescription
childrenstringNoText content of the description.
styleStyleSheetNoCustom styles for the description.