Skip to content
+

Toast

Temporary notification for background outcomes and updates.

Introduction

Toast is part of the Open UI Kit Core public API. Use it to communicate status, interruption, confirmation, or contextual guidance.

Use this page as the implementation entry point, then use Storybook to inspect visual states, prop combinations, and edge cases that are easier to understand interactively.

Import

import { Toast } from '@open-ui-kit/core';

When to use

Use Toast for temporary confirmation or background outcomes that should not interrupt the current task.

Anatomy

A toast includes a status, title, description, optional action, and automatic or explicit dismissal.

Keep each part purposeful: the visible label or title should explain the object, the state should reflect real product data, and supporting content should help users decide what to do next.

Basic example

import { Toast } from '@open-ui-kit/core';

export function ToastExample() {
  return (
    <Toast>
      Toast
    </Toast>
  );
}

Storybook scenarios

Storybook is the source of truth for interactive examples, controls, and visual state checks. Start with the closest story, then adapt the props to match your product flow.

  • Default
  • Without Title
  • Success
  • Error
  • Warning
  • Info
  • Without Close Button
  • Without Action
  • All Types
  • All Types Without Title
  • Glow / With header
  • Glow / Without header

Glow

Pass glow for the "Toast message Glow" treatment: a Global-Border/Fade gradient border with a blue glow cast from behind the toast.

It comes in two forms, picked automatically from whether a title is set:

  • With header — title above the message, carrying the stronger glow.
  • Without header — message only, with the softer glow.

Use it for AI-generated insights and summaries, where the toast reports something the system noticed rather than the outcome of a user action. Keep the status type at its default; the gradient border replaces the status border, so pairing the two reads as two competing signals.

Behavior notes

  • Match the strength of the surface to the urgency of the message.
  • Use blocking surfaces only when the user must decide before continuing.
  • Keep recovery actions explicit for warnings, errors, and destructive flows.

Props

Toast is exported from @open-ui-kit/core. Use the exported TypeScript props for implementation details and keep local overrides narrow.

Prop Type Description
Toast props Component-specific props Controls the supported behavior, slots, state, and styling for Toast.
glow boolean Applies the glow treatment. The glow is stronger when title is also set.
children React.ReactNode Content rendered inside the component when the component supports composition.
className string Adds a class to the root slot for product-level styling hooks.
sx SxProps Applies local style overrides while still using the active Open UI Kit theme.

Accessibility

  • Use clear text that does not require the icon or color to understand the state.
  • Move focus only for interruptive surfaces that take over the current task.
  • Check light and dark mode contrast for message text and action labels.

Usage guidance

  • Keep feedback close to the event or surface it describes.
  • Use one primary recovery action when possible.
  • Avoid stacking multiple urgent messages unless the user can act on each one.
  • Make dismissal behavior predictable and preserve critical state elsewhere.

Resources