Banner

Implemented Feedback

Inline message bar with variants and optional action.

Kumo reference: kumo-ui.com/components/banner/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Information

Update available

A new version is ready to install.

Session expiring

Your session will expire in 5 minutes.

Save failed

We couldn't save your changes. Please try again.

Maintenance scheduled

This service will be unavailable for 10 minutes.

Show template

{% load wdj %}
<div class="flex w-full flex-col gap-3">
  {% include "wdj/components/banner.html" with title="Update available" text="A new version is ready to install." only %}
  {% include "wdj/components/banner.html" with variant="alert" title="Session expiring" text="Your session will expire in 5 minutes." only %}
  {% include "wdj/components/banner.html" with variant="error" title="Save failed" text="We couldn't save your changes. Please try again." only %}
  {% include "wdj/components/banner.html" with variant="secondary" title="Maintenance scheduled" text="This service will be unavailable for 10 minutes." only %}
</div>

Warning

Quota approaching

Storage is nearly full.

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with variant="alert" title="Quota approaching" text="Storage is nearly full." only %}

Error

Request failed

Try again later.

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with variant="error" title="Request failed" text="Try again later." only %}

Secondary

Changes are saved automatically.

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with variant="secondary" text="Changes are saved automatically." only %}

Dismissible

Release notes

Review the latest changes.

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with title="Release notes" text="Review the latest changes." dismissible=True only %}

Small

Update available

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with title="Update available" size="sm" only %}

With action

New version available

View release notes

Show template

{% load wdj %}
{% wdj_component "wdj/components/banner.html" title="New version available" %}
{% include "wdj/components/button.html" with label="View release notes" href="/components/" only %}
{% endwdj_component %}

Success message

Changes saved

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with variant="secondary" icon="check-circle-2" title="Changes saved" only %}

Description only

Configuration is saved automatically.

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with description="Configuration is saved automatically." only %}

Title only

Update available

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with title="Update available" only %}

With icon

Deployment ready

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with icon="rocket" title="Deployment ready" only %}

Without dismissal

Persistent information

Review this information.

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with title="Persistent information" text="Review this information." only %}

Compact warning

Quota approaching

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with variant="alert" size="sm" title="Quota approaching" only %}

Compact error

Request failed

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with variant="error" size="sm" title="Request failed" only %}

Long content

Access policy

Review the permissions assigned to this project before granting access to additional workspace members.

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with title="Access policy" description="Review the permissions assigned to this project before granting access to additional workspace members." only %}

Multiple trailing actions

Review deployment

Check the changes before continuing.

Read guide

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with title="Review deployment" description="Check the changes before continuing." actions=audit_actions only %}

Compact with CTA

A new configuration is available.

Read guide

Show template

{% load wdj %}
{% include "wdj/components/banner.html" with size="sm" text="A new configuration is available." actions=audit_actions only %}

Custom content

Review these settings before continuing.

Show template

{% load wdj %}
{% wdj_component "wdj/components/banner.html" variant="secondary" %}
<p>Review <strong class="font-medium">these settings</strong> before continuing.</p>
{% endwdj_component %}

API Reference

Prop	Type	Default	Description
title	string	unset	Title; pass the documented value shown in the examples.
description	string	unset	Description; pass the documented value shown in the examples.
text	string	unset	Text; pass the documented value shown in the examples.
variant	string	component-specific	Variant; pass the documented value shown in the examples.
size	string	base	Size; pass the documented value shown in the examples.
icon	string	unset	Icon; pass the documented value shown in the examples.
action	string / HTML slot	unset	Action; pass the documented value shown in the examples.
actions	list[dict]	unset	Actions; pass the documented value shown in the examples.
dismissible	bool	False	Dismissible; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract