Toast

Display a brief notification.

#
Documentation

#
Usage

Use toaster.create() to add toasts. The method takes two arguments message and options.

import { Button, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Button onClick={() => toaster.create("This is an example toast message.")}>
      Create Toast
    </Button>
  );
}

#
Appearance

Use the type option in the second argument to select between the different toast types.

import { Button, Flex, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row" flexWrap="wrap">
      {(
        ["danger", "information", "neutral", "success", "warning"] as const
      ).map((type) => (
        <Button
          key={type}
          onClick={() =>
            toaster.create("This is an example toast message.", { type })
          }
        >
          {type} toast
        </Button>
      ))}
    </Flex>
  );
}

#
Action

Use the action and onAction options to include a short action button associated with the toast.

Task in-progress

import { Button, Flex, Text, toaster } from "@optiaxiom/react";
import { IconTrash } from "@tabler/icons-react";
import { useState } from "react";
 
export function App() {
  const [status, setStatus] = useState("in-progress");
 
  return (
    <Flex flexDirection="row">
      <Text>Task {status}</Text>
 
      <Button
        appearance="danger-outline"
        disabled={status === "deleted"}
        icon={<IconTrash />}
        onClick={() => {
          setStatus("deleted");
          toaster.create("Task Deleted", {
            action: "Undo",
            onAction: () => setStatus("in-progress"),
          });
        }}
      >
        Delete
      </Button>
 
      <Button
        disabled={status !== "deleted"}
        onClick={() => setStatus("in-progress")}
      >
        Restore
      </Button>
    </Flex>
  );
}

#
Dismiss

Use toaster.remove() to remove toasts. The create() method returns a unique ID for the toast which can then be passed to the remove() method.

import { Button, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Button
      onClick={async () => {
        const id = toaster.create("Saving task");
        // simulate network request
        await new Promise((resolve) => setTimeout(resolve, 3_000));
        toaster.remove(id);
        toaster.create("Could not save task", { type: "danger" });
      }}
    >
      Create Toast
    </Button>
  );
}

#
Related

Alert

Show inline messages about important or time-sensitive changes.

Banner

Display a prominent message at the top of the screen.

#
Props

#
Toast

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
defaultOpen false \| true
duration Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`. number
intent "information" \| "success" \| "warning" \| "danger" \| "neutral" Default: neutral
onEscapeKeyDown (event: KeyboardEvent) => void
onOpenChange (open: boolean) => void
onPause () => void
onResume () => void
onSwipeCancel (event: SwipeEvent) => void
onSwipeEnd (event: SwipeEvent) => void
onSwipeMove (event: SwipeEvent) => void
onSwipeStart (event: SwipeEvent) => void
type "background" \| "foreground"

#
ToastTitle

Supports all Text props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
lineClamp Truncate the text at specific number of lines. "1" \| "2" \| "3" \| "4"
truncate Whether to truncate the text and add an ellipsis at the end. false \| true

#
ToastAction

Supports all Button props in addition to its own. Renders a <button> element.

Prop
addonAfter Display content inside the button after `children`. ReactNode
addonBefore Display content inside the button before `children`. ReactNode
altText* A short description for an alternate way to carry out the action. For screen reader users who will not be able to navigate to the button easily/quickly. string
appearance Control the appearance by selecting between the different button types. "default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "inverse" Default: inverse
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
disabled Whether the button is disabled. false \| true
icon Display an icon before or after the button content or omit `children` to only show the icon. ReactNode
iconOnly Whether button should have square shape. false \| true
iconPosition Control whether to show the icon before or after the button content. "end" \| "start"
loading Whether to show loading spinner inside the button. false \| true
size Control the size of the button. "sm" \| "md" \| "lg" Default: sm

#
ToastProvider

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
container Element \| DocumentFragment
duration Time in milliseconds that each toast should remain visible for. @defaultValue 5000 number
hotkey The keys to use as the keyboard shortcut that will move focus to the toast viewport. @defaultValue [‘F8’] string[]
label An author-localized label for each toast. Used to help screen reader users associate the interruption with a toast. @defaultValue ‘Notification’ string
position "bottom" \| "top" \| "bottom-left" \| "bottom-right" \| "top-left" \| "top-right" Default: bottom-right
swipeDirection Direction of pointer swipe that should close the toast. @defaultValue ‘right’ "left" \| "right" \| "up" \| "down"
swipeThreshold Distance in pixels that the swipe must pass before a close is triggered. @defaultValue 50 number
toaster An instance of toaster returned from the `createToaster` method. Toaster

#
Changelog

#
0.1.0

Added component

Textarea ToggleButton