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`
`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`
`square` Whether button should have square shape. `false \| true`

#
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: `top-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