Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Toast

A succinct message that is displayed temporarily.

code

Expend code


  <Button
      variant="outlined" 
      type="button"
      onClick={() => {
          toast({ 
              title: 'Scheduled: Catch up ', 
              description: 'Friday, February 10, 2023 at 5:57 PM', 
          })
      }}
  >
      show Toast
  </Button>


  <Button
      variant="outlined" 
      type="button"
      onClick={() => {
          toast({ 
              title: 'Scheduled: Catch up ', 
              description: 'Friday, February 10, 2023 at 5:57 PM', 
          })
      }}
  >
      show Toast
  </Button>

Installation

1. Run the following command:

npm com-fac@latest add toast

npm com-fac@latest add toast

2. Add the Toaster component


  import { Toaster } from "@/components/ui/toaster"
 
  export default function RootLayout({ children }) {
      return (
          <html lang="en">
              <head />
              <body>
                  <main>{children}</main>
                  <Toaster />
              </body>
          </html>
      )
  }


  import { Toaster } from "@/components/ui/toaster"
 
  export default function RootLayout({ children }) {
      return (
          <html lang="en">
              <head />
              <body>
                  <main>{children}</main>
                  <Toaster />
              </body>
          </html>
      )
  }

Usage

The useToast hook returns a toast function that you can use to display a toast.


  import { useToast } from '@/hooks/useToast'


  import { useToast } from '@/hooks/useToast'


  export default function ToastPage() {
      const { toast } = useToast()

      return(
          <Button
              variant="outlined" 
              type="button"
              onClick={() => {
                  toast({ 
                      title: 'Scheduled: Catch up ', 
                      description: 'Friday, February 10, 2023 at 5:57 PM', 
                  })
              }}
          >
            show Toast
          </Button>
      )
  }


  export default function ToastPage() {
      const { toast } = useToast()

      return(
          <Button
              variant="outlined" 
              type="button"
              onClick={() => {
                  toast({ 
                      title: 'Scheduled: Catch up ', 
                      description: 'Friday, February 10, 2023 at 5:57 PM', 
                  })
              }}
          >
            show Toast
          </Button>
      )
  }

#Simple

code

Expend code


  <Button
      variant="outlined" 
      type="button"
      onClick={() => {
          toast({ 
              title: 'Your message has been sent.', 
          })
      }}
  >
      show Toast
  </Button>


  <Button
      variant="outlined" 
      type="button"
      onClick={() => {
          toast({ 
              title: 'Your message has been sent.', 
          })
      }}
  >
      show Toast
  </Button>

#Destructive

code

Expend code


  <Button
      variant="outlined" 
      type="button"
      onClick={() => {
          toast({ 
              variant: "destructive",
              title: "Uh oh! Something went wrong.",
              description: "There was a problem with your request.",
          })
      }}
  >
      show Toast
  </Button>


  <Button
      variant="outlined" 
      type="button"
      onClick={() => {
          toast({ 
              variant: "destructive",
              title: "Uh oh! Something went wrong.",
              description: "There was a problem with your request.",
          })
      }}
  >
      show Toast
  </Button>

Props

다음 속성을 사용하여 툴팁을 맞춤 설정할 수 있습니다.

Prop	Type	Default	Description
variant	"default" \| "destructive"	default	The variant to use.
title	string	-	The title to display.
description	string	-	The description to display.
duration	string	3000	The time in milliseconds that should elapse before automatically closing each toast.