Toast — Component Storybook

LIVE PREVIEW 4

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

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

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

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

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 1

Name	Type	Default
`message`	`str`	—

PROPS — OPTIONAL 7

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

ACCESSIBILITY 2

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

AVAILABLE SLOTS 2

slot_message slot_actions

CSS VARIABLES 9

--background --border --destructive --foreground --radius --space-2 --space-4 --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>