@askrjs/ui/toast

Toasttype

Toast: (props: ToastProps) => JSX.Element | null

Toast registers a notification entry with the host and returns no DOM on its own.

TOAST_A11Y_CONTRACTtype

TOAST_A11Y_CONTRACT: { readonly ROOT_ROLE: "status"; readonly LIVE_REGION_ATTRIBUTE: "aria-live"; readonly LIVE_REGION_VALUE: "polite"; readonly VIEWPORT_LABEL: "Notifications"; readonly AUTO_DISMISS_PAUSE: "pointer-or-focus"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; }

Toast accessibility contract.

ToastA11yContracttype

ToastA11yContract: typeof TOAST_A11Y_CONTRACT

Type of the Toast A11y Contract object.

ToastActiontype

ToastAction: { (props: ToastActionProps): JSX.Element; (props: ToastActionAsChildProps): JSX.Element; }

ToastAction closes the toast after handling a user-triggered action. Renders the `toast-action` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastActionAsChildPropstype

ToastActionAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Action.

asChild

asChild: true;

children

children: JSXElement;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<Element>;

type

type?: undefined;

ToastActionPropstype

ToastActionProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Toast Action.

asChild

asChild?: false | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<HTMLButtonElement>;

type

type?: "button" | "submit" | "reset" | undefined;

ToastClosetype

ToastClose: { (props: ToastCloseProps): JSX.Element; (props: ToastCloseAsChildProps): JSX.Element; }

ToastClose is the dedicated dismiss control for a toast entry. Renders the `toast-close` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastCloseAsChildPropstype

ToastCloseAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Close.

asChild

asChild: true;

children

children: JSXElement;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<Element>;

type

type?: undefined;

ToastClosePropstype

ToastCloseProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Toast Close.

asChild

asChild?: false | undefined;

children

children?: unknown;

disabled

disabled?: boolean | undefined;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

ref

ref?: Ref<HTMLButtonElement>;

type

type?: "button" | "submit" | "reset" | undefined;

ToastDescriptiontype

ToastDescription: { (props: ToastDescriptionProps): JSX.Element; (props: ToastDescriptionAsChildProps): JSX.Element; }

ToastDescription marks the accessible description slot for a toast entry. Renders the `toast-description` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastDescriptionAsChildPropstype

ToastDescriptionAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Description.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

ToastDescriptionPropstype

ToastDescriptionProps: BoxProps<'div', HTMLDivElement>

Props for Toast Description.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

ToastHosttype

ToastHost: (props: ToastHostProps) => JSX.Element

ToastHost owns the registry of active toast entries and the default display duration for the family.

ToastHostOwnPropstype

ToastHostOwnProps: {
  children?: unknown;
  id?: string;
  duration?: number;
}

Props for the host that owns toast timing defaults and the registry.

children

children?: unknown;

duration

duration?: number | undefined;

id

id?: string | undefined;

ToastHostPropstype

ToastHostProps: BoxProps<'div', HTMLDivElement> & ToastHostOwnProps

Props for Toast Host.

asChild

asChild?: false | undefined;

children

children?: unknown;

duration

duration?: number | undefined;

id

id?: string | undefined;

ref

ref?: Ref<HTMLDivElement>;

ToastOwnPropstype

ToastOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  duration?: number;
  variant?: ToastVariant;
}

Props for a toast registration entry declared through Toast.

children

children?: unknown;

defaultOpen

defaultOpen?: boolean | undefined;

duration

duration?: number | undefined;

id

id?: string | undefined;

onOpenChange

onOpenChange?: ((open: boolean) => void) | undefined;

open

open?: boolean | undefined;

variant

variant?: ToastVariant | undefined;

ToastPropstype

ToastProps: BoxProps<'div', HTMLDivElement> & ToastOwnProps

Props for Toast.

asChild

asChild?: false | undefined;

children

children?: unknown;

defaultOpen

defaultOpen?: boolean | undefined;

duration

duration?: number | undefined;

id

id?: string | undefined;

onOpenChange

onOpenChange?: ((open: boolean) => void) | undefined;

open

open?: boolean | undefined;

ref

ref?: Ref<HTMLDivElement>;

variant

variant?: ToastVariant | undefined;

ToastTitletype

ToastTitle: { (props: ToastTitleProps): JSX.Element; (props: ToastTitleAsChildProps): JSX.Element; }

ToastTitle marks the accessible title slot for a toast entry. Renders the `toast-title` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastTitleAsChildPropstype

ToastTitleAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Title.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

ToastTitlePropstype

ToastTitleProps: BoxProps<'div', HTMLDivElement>

Props for Toast Title.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;

ToastViewporttype

ToastViewport: { (props: ToastViewportProps): JSX.Element; (props: ToastViewportAsChildProps): JSX.Element; }

ToastViewport renders the live toast stack and the notification region. Renders the `toast-viewport` part of `toast` with `role="region"`. Supports polymorphic rendering via `asChild`.

ToastViewportAsChildPropstype

ToastViewportAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Viewport.

asChild

asChild: true;

children

children: JSXElement;

ref

ref?: Ref<Element>;

ToastViewportPropstype

ToastViewportProps: BoxProps<'div', HTMLDivElement>

Props for Toast Viewport.

asChild

asChild?: false | undefined;

children

children?: unknown;

ref

ref?: Ref<HTMLDivElement>;