ToastBar

ToastBar is the default row primitive used by Toaster when you do not provide a custom row renderer.

Props

• toast
• position?
• style?
• children?

Default behavior

ToastBar does three main things:

• computes enter/exit motion styles from toast.status and position
• renders the default icon through ToastIcon
• renders the default message layout unless you override it with children

If toast.type === 'custom', it renders toast.message directly.

Custom row layout

If children is a render function, it receives:

{ icon, message }

<ToastBar toast={toast}>
  {({ icon, message }) => (
    <>
      {icon}
      <strong>{message}</strong>
    </>
  )}
</ToastBar>

When to use it

• Use ToastBar when you want to keep the default motion/container behavior but customize the inner layout.
• Use a fully custom row from Toaster children when you want to replace the row as a whole.