Use Toast notifications to show feedback to user actions in Django and JS/TS/React.
By default, info and success toasts are visible for five seconds, while warning and error messages are visible forever. This can be overriden, see below.
Toasts are automatically shown when using Django's message framework, on both normal and htmx requests:
from django.contrib import messages
messages.info(request, 'Did you know?')
messages.success(request, 'Thing done successfully! 🎉')
messages.warning(request, 'Careful with that!')
messages.error(request, 'Oh no, server is on fire! 🔥')
messages.info(request, "Need more information?<br /><a href='#'>Click here!</a>", extra_tags='safe')
messages.info(request, 'This message is visible for 10 seconds.', extra_tags='duration:10s')
messages.info(request, 'This message is visible <em>forever</em>.', extra_tags='safe duration:infinite')
We automatically show error toasts if htmx requests fail:
If you return an 400 with content, we will display the content. Useful for form validation errors.
return HttpResponse(status=400, content='Some message from the server')
During development, we show a button to open the Django debug screen when available.
Similar to our current 500.html template, the toast shows the latest Sentry event ID, if any.
See examples in this PR.
Toasts can also be shown from anywhere we run JS/TS, such as React components:
import showToast from 'cloud/static/modules/toasts/toast';
showToast({type: 'success', content: 'Project updated!'})
showToast({type: 'info', content: <span>Supports <strong>JSX</strong></span>})
showToast({type: 'info', content: 'This message is visible for 10 seconds.', duration: 10000})