Compositional portaled notification with optional timeout.
@combric/react · v1.1.1 · Current
import { ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
import { Toast, ToastClose, ToastDescription, ToastTitle, ToastViewport } from "@combric/react";
export function Example() {
return <ToastViewport aria-label="Notifications"><Toast duration={0}><ToastTitle>Saved</ToastTitle><ToastDescription>Your changes are available.</ToastDescription><ToastClose>Dismiss</ToastClose></Toast></ToastViewport>;
}import { useState } from "react";
import { Toast, ToastClose, ToastDescription, ToastTitle, ToastViewport } from "@combric/react";
export function Example() {
const [open, setOpen] = useState(false);
return <><button type="button" onClick={() => setOpen(true)}>Show urgent notification</button><ToastViewport aria-label="Urgent notifications"><Toast open={open} onOpenChange={setOpen} duration={0} priority="assertive"><ToastTitle>Connection lost</ToastTitle><ToastDescription>Changes have not been saved.</ToastDescription><ToastClose>Dismiss</ToastClose></Toast></ToastViewport></>;
}| Name |
|---|
ToastViewport |
Toast |
ToastTitle |
ToastDescription |
ToastClose |
| Property / capability | Published contract |
|---|---|
| Contract | open/defaultOpen |
| Contract | duration (0 disables) |
| priority | polite | assertive |
Uses status or alert semantics by priority, provides an accessible close action, and never moves focus.
Close is a native button; notification itself does not capture focus.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.