Primary
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Primary" variant="primary" only %}Button
Implemented ActionVariants, sizes, shapes, icons and loading state.
Kumo reference: kumo-ui.com/components/button/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Overview
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Button" only %}
{% include "wdj/components/button.html" with icon="plus" shape="square" aria_label="Add" only %}Variants
Secondary
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Secondary" variant="secondary" only %}Ghost
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Ghost" variant="ghost" only %}Destructive
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Destructive" variant="destructive" only %}Secondary destructive
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Secondary destructive" variant="secondary-destructive" only %}Outline
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Outline" variant="outline" only %}Layout
Sizes
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="xs" size="xs" only %}
{% include "wdj/components/button.html" with label="sm" size="sm" only %}
{% include "wdj/components/button.html" with label="base" size="base" only %}
{% include "wdj/components/button.html" with label="lg" size="lg" only %}Leading icon
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Create worker" icon="plus" only %}Trailing icon
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Continue" icon_after="arrow-right" only %}Shapes
Show template
{% load wdj %}
{% include "wdj/components/button.html" with icon="plus" shape="square" aria_label="Add item" only %}
{% include "wdj/components/button.html" with icon="plus" shape="circle" aria_label="Add item" only %}States
Loading
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Saving" loading=True variant="primary" only %}Disabled
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Unavailable" disabled=True only %}Interactive
Show template
{% load wdj %}
<div x-data="{ count: 0 }" class="flex items-center gap-3"><button type="button" @click="count++" class="h-9 rounded-lg bg-kumo-base px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Click me</button><output aria-live="polite" x-text="count">0</output></div>Title
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Create worker" title="Create a new worker" only %}Links
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Link documentation" href="/components/link/" only %}
{% include "wdj/components/button.html" with label="Kumo reference" href="https://kumo-ui.com/" target="_blank" rel="noopener noreferrer" icon_after="external-link" only %}Disabled link
Show template
{% load wdj %}
{% include "wdj/components/button.html" with label="Unavailable documentation" href="/components/link/" disabled=True only %}Link with tooltip
Read guide
Open the integration guide
Show template
{% load wdj %}
{% wdj_component "wdj/components/tooltip.html" content="Open the integration guide" %}
{% include "wdj/components/button.html" with label="Read guide" href="/guide/" only %}
{% endwdj_component %}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| variant | string | secondary | Variant; pass the documented value shown in the examples. |
| size | string | base | Size; pass the documented value shown in the examples. |
| shape | string | unset | Shape; pass the documented value shown in the examples. |
| type | string | button | Type; pass the documented value shown in the examples. |
| href | string | unset | Href; pass the documented value shown in the examples. |
| icon | string | unset | Icon; pass the documented value shown in the examples. |
| icon_after | string | unset | Icon after; pass the documented value shown in the examples. |
| loading | bool | False | Loading; pass the documented value shown in the examples. |
| disabled | bool | False | Disabled; pass the documented value shown in the examples. |
| name | string | unset | Name; pass the documented value shown in the examples. |
| value | string | unset | Value; pass the documented value shown in the examples. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| title | string | unset | Title; pass the documented value shown in the examples. |
| aria_label | string | unset | Aria label; pass the documented value shown in the examples. |
| aria_pressed | string | unset | Aria pressed; pass the documented value shown in the examples. |
| aria_expanded | string | unset | Aria expanded; pass the documented value shown in the examples. |
| aria_controls | string | unset | Aria controls; pass the documented value shown in the examples. |
| aria_haspopup | string | unset | Aria haspopup; pass the documented value shown in the examples. |
| hx_get | string | unset | Hx get; pass the documented value shown in the examples. |
| hx_post | string | unset | Hx post; pass the documented value shown in the examples. |
| hx_target | string | unset | Hx target; pass the documented value shown in the examples. |
| hx_swap | string | unset | Hx swap; pass the documented value shown in the examples. |
| hx_indicator | string | unset | Hx indicator; pass the documented value shown in the examples. |
| hx_confirm | string | unset | Hx confirm; 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. |