Toast

Style-agnostic toast notification component using CSS custom properties.

template 1 required7 optional2 slots2 a11y rules

variant

This is a success toast notification.

toast(variant='success', message='This is a success toast notification.')

Usage

views.py

from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.variant = 'success'

my_template.html

{% load theme_components %}
{% theme_toast variant=variant message='This is a success toast notification.' %}

Props

Name	Type	Required	Default
message	str	required	—
variant	str		info
position	str		top-right
duration	int		5000
css_prefix	str		—
attrs	dict		—
slot_message	str		—
slot_actions	str		—

Requirement	Element	Attribute	Value
Toast must have role=status	div	role	status
Toast must have aria-live=polite	div	aria-live	polite

Slots

slot_message slot_actions

Source & styles

File	Path	Notes
template	djust_theming/components/toast.html	Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
css	djust_theming/components.css	Defines 9 of this component's classes at line 812, 826, 846, 850, 861, 876, 882, 888, 894. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_components/components.css	Defines 7 of this component's classes at line 99, 100, 101, 102, 103, 109, 110. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/print.css	Defines 1 of this component's classes at line 18. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/scaffold.css	Defines 1 of this component's classes at line 774. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

CSS variables

--background --border --destructive --foreground --radius --success --warning

Template source — toast.html

<div class="{{ css_prefix }}toast {{ css_prefix }}toast-{{ variant }} {{ css_prefix }}toast-{{ position }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
     role="status"
     aria-live="polite"
     data-theme-toast
     data-duration="{{ duration }}"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    <div class="{{ css_prefix }}toast-content">
        {% if slot_message %}{{ slot_message|safe }}{% else %}<div class="{{ css_prefix }}toast-message">{{ message }}</div>{% endif %}
    </div>
    {% if slot_actions %}
    <div class="{{ css_prefix }}toast-actions">
        {{ slot_actions|safe }}
    </div>
    {% endif %}
    <button class="{{ css_prefix }}toast-close" onclick="this.parentElement.remove()" aria-label="Dismiss">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>

Toast

Preview

Usage

Props

Accessibility

Slots