Toast

Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다.

Toast 컴포넌트는 화면의 모서리에 일시적인 알림 메시지를 표시하는 데 사용됩니다.

사용자의 작업에 대한 피드백을 제공하고, 피드백을 하나의 리스트로 관리하기 때문에 다른 컴포넌트와 사용 방식이 다릅니다.

Property

Methods

Toast를 추가, 업데이트 및 제거할 수 있습니다.

ColorPalette

Toast의 색상 팔레트를 설정합니다.

Examples

Action

Action 버튼과 함께 사용할 수 있습니다.

Close

Close 버튼을 제거할 수 있습니다.

Icon

Icon을 커스텀 할 수 있습니다.

Custom

Toast 아이템을 완전히 커스텀할 수 있습니다.

Props

Toast.Provider

Provides toast state to its children and shows each toast added through useToastManager or a toastManager, with an icon, title, description, action, and close button. Doesn't render its own HTML element.

PropDefaultType
children?
-
ReactNode
toastManager?
-
ToastManager
limit?
3
number
timeout?
4000
number

Toast.ProviderPrimitive

Provides toast state to its children without showing any toasts, so you can build your own toast list from the other primitives. Doesn't render its own HTML element.

PropDefaultType
children?
-
ReactNode
toastManager?
-
ToastManager
limit?
3
number
timeout?
5000
number

Toast.PortalPrimitive

Portal container that renders the toast list outside the normal DOM hierarchy. Renders a <div> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
container?
-
HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null
render?
-
ReactElementfunction

Toast.ViewportPrimitive

Fixed area of the screen where toasts stack. Renders a <div> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Toast.RootPrimitive

A single toast, colored by the colorPalette of its toast object. Renders a <div> element.

PropDefaultType
toast
-
ToastObjectType<any>
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
swipeDirection?
['up', 'right']
leftrightupdown("left" | "right" | "up" | "down")[]
render?
-
ReactElementfunction

Toast.ContentPrimitive

Container for the text and buttons of a toast. Renders a <div> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Toast.TitlePrimitive

Heading that shows the title of the toast. Renders an <h2> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Toast.DescriptionPrimitive

Paragraph that shows the description of the toast. Renders a <p> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

Toast.ActionPrimitive

Button that runs the action of the toast, styled by the actionProps of the toast object. Renders a <button> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
nativeButton?
true
boolean
render?
-
ReactElementfunction

Toast.ClosePrimitive

Icon button that closes the toast. Hidden when the close option of the toast object is false. Renders a <button> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
nativeButton?
true
boolean
render?
-
ReactElementfunction

Toast.IconPrimitive

Icon of the toast. Shows the icon of the toast object, or a default icon for the success and danger color palettes. Renders an <svg> element.

PropDefaultType
className?
-
stringfunction
style?
-
React.CSSPropertiesfunction
render?
-
ReactElementfunction

useToastManager

Toast를 구성하는 ToastOptions 객체입니다.

PropDefaultType
id?
-
string
title?
-
string
description?
-
string
colorPalette?
info
successdangerinfo
icon?
-
ReactNode
close?
true
falsetrue
actionProps?
-
ActionProps
data?
-
object
priority?
-
number

On this page