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="small"
          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
        >
          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

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.

Customizing

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

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} />