Alert — Component Storybook

LIVE PREVIEW 5

This is a default alert message.

This is a success alert message.

This is a warning alert message.

This is a destructive alert message.

This alert can be dismissed.

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 9

Name	Type	Default
`title`	`Optional[str]`	—
`variant`	`str`	default
`dismissible`	`bool`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_icon`	`str`	—
`slot_message`	`str`	—
`slot_actions`	`str`	—
`slot_dismiss`	`str`	—

ACCESSIBILITY 1

Requirement	Element	Attribute	Value
Alert container must have role=alert	`div`	`role`	alert

AVAILABLE SLOTS 4

slot_icon slot_message slot_actions slot_dismiss

CSS VARIABLES 20

--background --border --color-bg-subtle --color-border-strong --color-danger --color-danger-subtle --color-success --color-success-subtle --color-text --color-warning --color-warning-subtle --destructive --foreground --radius --radius-lg --space-2 --space-3 --space-4 --success --warning

TEMPLATE SOURCE

alert.html

<div class="{{ css_prefix }}alert {{ css_prefix }}alert-{{ variant }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
     role="alert"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    {% if slot_icon %}
    <div class="{{ css_prefix }}alert-icon">
        {{ slot_icon|safe }}
    </div>
    {% endif %}
    <div class="{{ css_prefix }}alert-content">
        {% if title %}
        <div class="{{ css_prefix }}alert-title">{{ title }}</div>
        {% endif %}
        {% if slot_message %}{{ slot_message|safe }}{% else %}<div class="{{ css_prefix }}alert-message">{{ message }}</div>{% endif %}
    </div>
    {% if slot_actions %}
    <div class="{{ css_prefix }}alert-actions">
        {{ slot_actions|safe }}
    </div>
    {% endif %}
    {% if dismissible %}
        {% if slot_dismiss %}
        {{ slot_dismiss|safe }}
        {% else %}
        <button class="{{ css_prefix }}alert-dismiss" onclick="this.parentElement.remove()" aria-label="Dismiss">
            <svg width="16" height="16" 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>
        {% endif %}
    {% endif %}
</div>