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.
| Prop | Default | Type |
|---|---|---|
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.
| Prop | Default | Type |
|---|---|---|
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.
| Prop | Default | Type |
|---|---|---|
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.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Toast.RootPrimitive
A single toast, colored by the colorPalette of its toast object. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
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.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Toast.TitlePrimitive
Heading that shows the title of the toast. Renders an <h2> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Toast.DescriptionPrimitive
Paragraph that shows the description of the toast. Renders a <p> element.
| Prop | Default | Type |
|---|---|---|
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.
| Prop | Default | Type |
|---|---|---|
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.
| Prop | Default | Type |
|---|---|---|
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.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
useToastManager
Toast를 구성하는 ToastOptions 객체입니다.
| Prop | Default | Type |
|---|---|---|
id? | - | string |
title? | - | string |
description? | - | string |
colorPalette? | info | successdangerinfo |
icon? | - | ReactNode |
close? | true | falsetrue |
actionProps? | - | ActionProps |
data? | - | object |
priority? | - | number |