Toast

Show toast

계약

Overview

Machine-readable contract from Component Spec.

component: toastexport: Toastversion: 1recipe: toasttokens.visual: toastattributes: data-refineui=toast

Anatomy

Part	data-refineui
root	toast
icon	toast-icon
item	toast-item
scale_layer	toast-scale-layer
toaster	toaster

Variants

Axis	Values
variant	default, success, error, warning

States

Scope	Category	Values
component	environment	forced-colors, dir, prefers-contrast

Accessibility

Slot	Element	Role
toast	div	status

Layout

Property	Value
direction	logical
rtl	true

토큰

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Variant

Select...󰯑

Show toast

Recipe → Tokens

Slot bindings for variant="success" — declared in toast.recipe.ts.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
root	—	background	toast.background	surfacePopover	neutralWhite	neutral750	bg-refineui-alias-surface-popover
message	—	foreground	toast.message	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary
icon	success	foreground	toast.accent.success	foregroundSuccess	green700	green200	text-refineui-alias-foreground-success

Component token trace

All paths in token-trace-v2.json prefixed with toast.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
toast.accent.default	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
toast.accent.error	foregroundError	red700	red200	#D93A3A	#FFC3C3
toast.accent.success	foregroundSuccess	green700	green200	#1D8822	#5BEE62
toast.accent.warning	foregroundWarning	yellow700	yellow200	#967000	#FFCB2F
toast.background	surfacePopover	neutralWhite	neutral750	#FFFFFF	#333333
toast.message	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Toast, Toaster, toast } from "@refineui/react";

// Add Toaster to your app root (one toast at a time by default)
<Toaster />

// Show a toast — replaces any currently visible toast
toast("Settings saved successfully", {
  variant: "success",
  duration: 3000,
});

toast("Upload failed", {
  variant: "error",
  action: {
    label: "Retry",
    onClick: () => retryUpload(),
  },
});

토스트를 위쪽으로 스와이프하거나 드래그하면 일찍 닫을 수 있습니다.

API 레퍼런스

Toast

Prop	Default	Type	Description
variant	"default"	"default" | "success" | "error" | "warning"	Toast 시각적 변형.
message	—	ReactNode	Toast 메시지.
icon	—	ReactNode	커스텀 아이콘 요소.
iconName	—	string	아이콘 이름(icon 미사용 시).
action	—	ReactNode | ToastAction	액션 버튼 또는 커스텀 요소.

Toaster

Prop	Default	Type	Description
maxToasts	1	number	동시 토스트 최대 개수. 기본은 이전 토스트를 대체합니다.
swipeDirections	["top"]	("top" | "right" | "bottom" | "left")[]	스와이프로 닫을 수 있는 방향.

toast(message, options)

프로그래밍 방식으로 토스트를 표시하는 함수입니다. 새 호출이 이전 토스트를 대체합니다.

옵션:

• variant?: ToastVariant — 시각적 변형
• icon?: ReactNode — 커스텀 아이콘
• action?: ToastAction — 액션 버튼
• duration?: number — 지속 시간(밀리초, 기본 4200)