ButtonGroup

Implemented Action

Joins a small set of tightly-coupled buttons into a single control (split buttons).

Kumo reference: kumo-ui.com/components/button-group/

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

Split button

A primary action joined with a dropdown trigger for secondary actions.

Show template

{% load wdj %}
{% wdj_component "wdj/components/button_group.html" aria_label="Deploy" %}
  {% include "wdj/components/button.html" with label="Deploy" variant="primary" only %}
  {% include "wdj/components/dropdown.html" with variant="primary" shape="square" aria_label="More deploy options" items=button_group_deploy_items only %}
{% endwdj_component %}

Secondary

Match the variant on both controls to create one split button.

Show template

{% load wdj %}
{% wdj_component "wdj/components/button_group.html" aria_label="Save" %}
  {% include "wdj/components/button.html" with label="Save" variant="secondary" only %}
  {% include "wdj/components/dropdown.html" with variant="secondary" shape="square" aria_label="More save options" items=button_group_save_items only %}
{% endwdj_component %}

Sizes

Match the size on both controls: small, base and large.

Show template

{% load wdj %}
<div class="flex flex-wrap items-center gap-4">
  {% for size in button_group_sizes %}
    {% wdj_component "wdj/components/button_group.html" aria_label="Deploy" %}
      {% include "wdj/components/button.html" with label="Deploy" variant="primary" size=size only %}
      {% include "wdj/components/dropdown.html" with variant="primary" shape="square" aria_label="More deploy options" size=size items=button_group_deploy_items only %}
    {% endwdj_component %}
  {% endfor %}
</div>

Button and link

Related actions retain native button and link semantics, including a wrapped link.

Guide

Show template

{% load wdj %}
{% wdj_component "wdj/components/button_group.html" aria_label="Preview actions" %}
  {% include "wdj/components/button.html" with label="Preview" only %}
  <span>{% include "wdj/components/button.html" with label="Guide" href="/guide/" only %}</span>
  {% include "wdj/components/button.html" with label="Archived" disabled=True only %}
{% endwdj_component %}

Vertical

The wdj vertical extension joins the top and bottom corners of related actions.

Show template

{% load wdj %}
{% wdj_component "wdj/components/button_group.html" orientation="vertical" aria_label="Save" %}
  {% include "wdj/components/button.html" with label="Save" size="sm" only %}
  {% include "wdj/components/dropdown.html" with label="More" aria_label="More save options" variant="secondary" size="sm" items=button_group_save_items only %}
{% endwdj_component %}

API Reference

Prop	Type	Default	Description
orientation	string	horizontal	horizontal (default) or the wdj vertical extension. Set size and variant on each child control.
aria_label	string	unset	Aria label; 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.
class	string	""	Class; pass the documented value shown in the examples.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.

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