Function Toast

starters/hooks/src/Toast.tsx:52–79

({state, toast, ...props}: AriaToastProps<string> & {state: ToastState<string>})

}

function Toast({state, toast, ...props}: AriaToastProps<string> & {state: ToastState<string>}) {
  let ref = useRef<HTMLDivElement>(null);
  /*- begin highlight -*/
  let {toastProps, contentProps, titleProps, closeButtonProps} = useToast(
    {...props, toast},
    state,
    ref
  );
  /*- end highlight -*/
  let {focusProps, isFocusVisible} = useFocusRing();

  return (
    <div
      {...mergeProps(toastProps, focusProps)}
      ref={ref}
      className="react-aria-Toast"
      data-focus-visible={isFocusVisible || undefined}>
      <div {...contentProps} className="react-aria-ToastContent">
        <div {...titleProps} slot="title">
          {toast.content}
        </div>
      </div>
      <Button {...closeButtonProps} slot="close" variant="quiet" aria-label="Close">
        <X size={16} />
      </Button>
    </div>
  );
}

export {Button};