Toast

import { useToast } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastDemo() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Notification",
          description: "This is an example message.",
          variant: "primary",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

import { useToast } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastSecondaryDemo() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Information",
          description: "Informational message.",
          variant: "secondary",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

import { useToast } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastSuccessDemo() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Success!",
          description: "Operation completed successfully.",
          variant: "success",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

import { useToast } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastWarningDemo() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Warning!",
          description: "Check the data before continuing.",
          variant: "warning",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

import { useToast } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastErrorDemo() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Error!",
          description: "An error occurred while processing the request.",
          variant: "error",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

import { useToast, ToastAction } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastWithAction() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Saved successfully!",
          description: "Your changes have been saved.",
          variant: "success",
          action: (
            <ToastAction altText="Undo" variant="success">
              Undo
            </ToastAction>
          ),
        })
      }}
    >
      Toast with Action
    </Button>
  )
}

import { useToast } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastWithoutIcon() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Simple message",
          description: "Toast without side icon.",
          variant: "secondary",
          showIcon: false,
        })
      }}
    >
      Toast without Icon
    </Button>
  )
}

import { useToast } from "@medway-ui/core";
import { Button } from "@medway-ui/core";
 
export function ToastWithoutDescription() {
  const { toast } = useToast();
 
  return (
    <Button
      onClick={() => {
        toast({
          title: "Title",
          variant: "secondary",
        })
      }}
    >
      Toast without Description
    </Button>
  )
}