Toast

Display content in a portal triggered by a button.

Anatomy

Mount all pieces together and create your Toast

import { Toast } from '@micode-ui/react';
 
<Toast
  isOpen={isOpen}
  setIsOpen={setIsOpen}
  title="Added to cart"
  content="You can now continue shipping"
/>

Example

<Surface>
  <Button onClick={() => setIsOpen(true)}>Add to Cart</Button>
  <Toast
    isOpen={isOpen}
    setIsOpen={setIsOpen}
    title="Added to cart"
    content="You can now continue shipping"
    duration={5000}
  />
</Surface>

API Reference

Contains all parts of the Toast.

Prop	Type	Default
`asChild`	`boolean`	`false`
`open`	`boolean`	`false`
`onOpenChange`	`function`	No default value
`duration`	`number`	No default value
`defaultOpen`	`boolean`	`true`
`onCloseAutoFocus`	`function`	No default value
`onEscapeKeyDown`	`function`	No default value
`onPointerDownOutside`	`function`	No default value
`onFocusOutside`	`function`	No default value
`onInteractOutside`	`function`	No default value
`forceMount`	`boolean`	No default value
`side`	`enum`	`"top"`
`sideOffset`	`number`	`0`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`

Last updated on October 15, 2023

Text Input Tooltip