Toast

A succinct message that is displayed temporarily.

Success

This is a success message

Installation

uvx shadcn_django@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>