Toast

import { Toast } from "density-base-ui";

export default function ToastDefaultExample() {
  return <Toast title="File uploaded" />;
}

import { Toast, View } from "density-base-ui";

export default function ToastColorExample() {
  return (
    <View>
      <Toast color="destructive" title="Upload failed" />
      <Toast color="warning" title="Storage almost full" />
      <Toast color="success" title="File uploaded" />
    </View>
  );
}

import { Toast } from "density-base-ui";

export default function ToastContentExample() {
  return (
    <Toast
      childrenEnd={<a href="#view">View</a>}
      childrenStart="✓"
      subtitle="Your file is ready to share."
      title="File uploaded"
    />
  );
}

import { Toast } from "density-base-ui";

export default function ToastDismissableExample() {
  return <Toast dismissable title="Dismissable toast" />;
}

import { Toast } from "density-base-ui";

export default function ToastSubtitleExample() {
  return (
    <Toast subtitle="Your file is ready to share." title="File uploaded" />
  );
}

import { Toast } from "density-base-ui";
import { Check } from "lucide-react";

export default function ToastChildrenStartExample() {
  return (
    <Toast
      childrenStart={<Check aria-hidden="true" size={16} />}
      title="File uploaded"
    />
  );
}

import { Toast, Button } from "density-base-ui";

export default function ToastChildrenEndExample() {
  return <Toast childrenEnd={<Button>View</Button>} title="File uploaded" />;
}

import { Toast } from "density-base-ui";
import "./ToastOptionsExample.css";

export default function ToastSizeExample() {
  return (
    <div className="toast-options-example">
      {(["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const).map(
        (size) => (
          <Toast
            key={size}
            size={size}
            subtitle="Title and Close control follow this size."
            title={`Size: ${size}`}
          />
        ),
      )}
    </div>
  );
}

import { Toast } from "density-base-ui";
import "./ToastOptionsExample.css";

export default function ToastDepthExample() {
  return (
    <div className="toast-options-example">
      {(["1", "2", "3", "4", "5", "6", "7"] as const).map((depth) => (
        <Toast
          depth={depth}
          key={depth}
          subtitle="Depth controls surface elevation."
          title={`Depth: ${depth}`}
        />
      ))}
    </div>
  );
}