diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index d4f5541..46262eb 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -33,6 +33,9 @@ import ComponentsDrawer, {
import ComponentsTabs, {
tableOfContents as componentsTabsToc,
} from "./docs/components/Tabs.mdx";
+import ComponentsToast, {
+ tableOfContents as componentsToastToc,
+} from "./docs/components/Toast.mdx";
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
import { HeadingContext } from "./HeadingContext";
@@ -182,6 +185,14 @@ const router = createBrowserRouter(
}
/>
+
+
+
+ }
+ />
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
index accb2d1..b98a9b1 100644
--- a/packages/react/src/RouteObject.ts
+++ b/packages/react/src/RouteObject.ts
@@ -54,6 +54,11 @@ export default {
path: "/docs/components/tabs",
name: "Tabs",
eq: (pathname: string) => pathname === "/docs/components/tabs"
+ },
+ {
+ path: "/docs/components/toast",
+ name: "Toast",
+ eq: (pathname: string) => pathname === "/docs/components/toast"
}
]
}
diff --git a/packages/react/src/docs/components/Toast.mdx b/packages/react/src/docs/components/Toast.mdx
new file mode 100644
index 0000000..1ede184
--- /dev/null
+++ b/packages/react/src/docs/components/Toast.mdx
@@ -0,0 +1,182 @@
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { ToastDemo } from "./ToastBlocks/Preview";
+import Examples from "./ToastBlocks/Examples";
+
+# Toast
+A brief message alert to inform users about events or actions.
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+## Installation
+
+1. Create a new file `Toast.tsx` in your component folder.
+2. Copy and paste the following code into the file.
+
+
+
+## Usage
+
+```tsx
+import { Toaster } from "@components/Toast";
+```
+
+```html
+
+```
+
+> Note:
+>
+> You can put Toaster in anywhere. It will automatically go to document.body through portal.
+> But, it is recommended to place it at the root of the application, just once.
+
+---
+
+```tsx
+import { useToast } from "@components/Toast";
+
+function App() {
+ const { toast } = useToast();
+ return ;
+}
+```
+
+## Props
+
+### Toaster
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `defaultOption` | `Partial` | `defaultToastOption` | Global options for toast. |
+
+```ts
+interface ToastOption {
+ closeButton: boolean;
+ closeTimeout: number | null;
+}
+
+const defaultToastOption: ToastOption = {
+ closeButton: true,
+ closeTimeout: 3000,
+};
+```
+
+## Examples
+
+### Normal
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Success
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Error
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Warning
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Pending - Fail
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Pending - Success
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/Error.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Error.tsx
new file mode 100644
index 0000000..4781572
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Examples/Error.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@components/Button";
+import { Toaster, useToast } from "@components/Toast";
+
+function Children() {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
+
+export function Error() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/Normal.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Normal.tsx
new file mode 100644
index 0000000..688140c
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Examples/Normal.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@components/Button";
+import { Toaster, useToast } from "@components/Toast";
+
+function Children() {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
+
+export function Normal() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/PendingFail.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/PendingFail.tsx
new file mode 100644
index 0000000..856b11a
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Examples/PendingFail.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@components/Button";
+import { Toaster, useToast } from "@components/Toast";
+
+function Children() {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
+
+export function PendingFail() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx
new file mode 100644
index 0000000..55eb23c
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Examples/PendingSuccess.tsx
@@ -0,0 +1,37 @@
+import { Button } from "@components/Button";
+import { Toaster, useToast } from "@components/Toast";
+
+function Children() {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
+
+export function PendingSuccess() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/Success.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Success.tsx
new file mode 100644
index 0000000..4b93466
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Examples/Success.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@components/Button";
+import { Toaster, useToast } from "@components/Toast";
+
+function Children() {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
+
+export function Success() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/Warning.tsx b/packages/react/src/docs/components/ToastBlocks/Examples/Warning.tsx
new file mode 100644
index 0000000..0facd76
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Examples/Warning.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@components/Button";
+import { Toaster, useToast } from "@components/Toast";
+
+function Children() {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
+
+export function Warning() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/packages/react/src/docs/components/ToastBlocks/Examples/index.ts b/packages/react/src/docs/components/ToastBlocks/Examples/index.ts
new file mode 100644
index 0000000..ae1401c
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Examples/index.ts
@@ -0,0 +1,16 @@
+import { Error } from "./Error";
+import { Normal } from "./Normal";
+import { PendingFail } from "./PendingFail";
+import { PendingSuccess } from "./PendingSuccess";
+import { Success } from "./Success";
+import { Warning } from "./Warning";
+
+export default {
+ Error,
+ Normal,
+ PendingFail,
+ PendingSuccess,
+ Success,
+ Warning,
+};
+
diff --git a/packages/react/src/docs/components/ToastBlocks/Preview.tsx b/packages/react/src/docs/components/ToastBlocks/Preview.tsx
new file mode 100644
index 0000000..f1b05b5
--- /dev/null
+++ b/packages/react/src/docs/components/ToastBlocks/Preview.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@components/Button";
+import { Toaster, useToast } from "@components/Toast";
+
+function Children() {
+ const { toast } = useToast();
+
+ return (
+
+ );
+}
+
+export function ToastDemo() {
+ return (
+ <>
+
+
+
+ );
+}