Toast

Style-agnostic toast notification component using CSS custom properties.

template 1 required 7 optional 2 slots 2 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'
        self.message = 'This is a success toast notification.'

my_template.html

{% load theme_components %}
{% theme_toast variant=variant message=message %}

Props

Name	Type	Required	Default	Description
message	str	required	—	Toast text content
variant	str		info	—
position	str		top-right	—
duration	int		5000	Auto-dismiss duration in ms (0 = no auto-dismiss)
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 881, 895, 915, 919, 930, 945, 951, 957, 963. 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 776. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

CSS variables

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

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