Toast

A message that is displayed to the user.

A toast messageAdditional details

Properties

variant

icon

title

description

Example

Source Code

Installation

"use client";

import React from "react";
import { Button } from "@/subframe/components/Button";
import { Toast } from "@/subframe/components/Toast";

function ToastExample() {
  return (
    <Toast
      variant="neutral"
      icon="FeatherInfo"
      title="A toast message"
      description="Additional details"
      actions={
        <Button variant="neutral-tertiary" size="medium">
          Undo
        </Button>
      }
    />
  );
}

export default ToastExample;

Props

Toast

Prop

Type

Default

Additional info

variant

"brand" | "neutral" | "error" | "success"

"neutral"

icon

IconName

"FeatherInfo"

title

string

"A toast message"

description

string

"Additional details"

actions

React.ReactNode

—

This component is a <div>. Props like onClick and className will continue to work here.

Examples

Setup

Add <Toaster /> to the root of your app.


import { Toaster } from "@subframe/core"

function App() {
  return (
    <>
      <Toaster />
      {/* Rest of your app... */}
    </>
  )
}

and then import the toast function wherever you need to launch a toast.


import { toast } from "@subframe/core"

Variants

Use toast.custom(() => <Toast />) to launch the toast.


View code

Customizing

Use icon, title, and description props to customize the toast.


View code

Position

Use position to customize the toast location.


<Toaster position="top-left" />
<Toaster position="top-center" />
<Toaster position="top-right" />
<Toaster position="bottom-left" />
<Toaster position="bottom-center" />
<Toaster position="bottom-right" />

Visible toasts

Use visibleToasts to customize the number of toasts shown.


<Toaster visibleToasts={7} />