Toast

A succinct message that is displayed temporarily.

Success

This is a success message

Installation

uvx django_shadcn@latest add toast

Usage

<c-toast.trigger toast_target="toast-success"> Show Toast </c-toast.trigger>
<c-toast id="toast-success">
  <c-toast.content description="Your message here." />
</c-toast>

Examples

Simple

Your message has been sent.

<c-button variant="outline">
  <c-toast.trigger toast_target="toast-simple"> Show Toast </c-toast.trigger>
</c-button>
<c-toast id="toast-simple">
  <c-toast.content description="Your message has been sent." />
</c-toast>

With title

Success

Your message has been sent.

<c-button variant="outline">
  <c-toast.trigger toast_target="toast-title"> Show Toast </c-toast.trigger>
</c-button>
<c-toast id="toast-title">
  <c-toast.content title="Success" description="Your message has been sent." />
</c-toast>

With Action

Success

Your message has been sent.

<c-button variant="outline">
  <c-toast.trigger toast_target="toast-action"> Show Toast </c-toast.trigger>
</c-button>
<c-toast id="toast-action">
  <c-toast.content title="Success" description="Your message has been sent.">
    <c-button>Share</c-button>
  </c-toast.content>
</c-toast>

Destructive

Error

Your message could not be sent.

<c-button variant="outline">
  <c-toast.trigger toast_target="toast-fail"> Show Toast </c-toast.trigger>
</c-button>
<c-toast id="toast-fail">
  <c-toast.content
    type="destructive"
    title="Error"
    description="Your message could not be sent."
  >
    <c-button variant="ghost">Retry</c-button>
  </c-toast.content>
</c-toast>