MijnUI

Notification

This is a default toast.

Notification

This is a brand toast.

Notification

This is a success toast.

Notification

This is a warning toast.

Notification

This is a danger toast.

Installation

npm install @mijn-ui/react-toast

import { Toast } from "@mijn-ui/react-toast"

<Toast
  intent="success"
  title="Saved"
  description="Your changes have been saved."
  onClose={() => {}}
/>

Note:

Toast is a presentational component — render it yourself and control its lifecycle (position, queue, timeout) with your own state or a toast manager.

API Reference

Prop	Type	Default	Description
`intent`	`"default" \| "brand" \| "success" \| "warning" \| "danger"`	`"default"`	Color scheme of the toast.
`title`	`ReactNode`	—	The toast title.
`description`	`ReactNode`	—	The toast description.
`icon`	`ReactNode`	—	Leading icon.
`action`	`ReactNode`	—	An action element (e.g. an undo button).
`onClose`	`() => void`	—	Called when the close button is clicked. Renders the close button when provided.
`unstyled`	`boolean`	`false`	Opt out of the default styles.
`classNames`	`object`	—	Override classes per slot (see Style Slots below).
`className`	`string`	—	Additional classes for the root element.

Toast Style Slots

Slot Name	Targeted Component	Purpose
`base`	`Toast`	Styles the root toast container.
`icon`	`Toast`	Styles the leading icon wrapper.
`body`	`Toast`	Styles the title/description wrapper.
`title`	`Toast`	Styles the toast title.
`description`	`Toast`	Styles the toast description.
`action`	`Toast`	Styles the action element.
`close`	`Toast`	Styles the close button.

Toast

Installation

Note:

API Reference

Toast Style Slots

On this page