Components - Feather

Import a macro and call it. Every framework component lives in feather/templates/components/ and is imported from components/<file>.html.

{% from "components/button.html" import button %}
{% from "components/icon.html" import icon %}

{{ button("Save", type="submit") }}
{{ button("Delete", variant="danger", icon=icon("delete", size="sm")) }}

Available macros

Macro	File	Signature
`alert`	`alert.html`	`alert(message, class="")`
`button`	`button.html`	`button(text, type="button", variant="primary", icon=None, class="")`
`card`	`card.html`	`card(class="")` — call block
`confirm_modal`	`confirm_modal.html`	`confirm_modal()` — backs `hx-confirm`
`dropdown`	`dropdown.html`	`dropdown(name, options, selected=None, placeholder=None, label=None, inline=False, required=False, class="")`
`htmx_indicator`	`htmx_indicator.html`	`htmx_indicator(color="#6366f1")`
`icon`	`icon.html`	`icon(name, size="md", class="")`
`input`	`input.html`	`input(name, type="text", placeholder="", required=False, class="")`
`textarea`	`input.html`	`textarea(name, rows=3, placeholder="", required=False, class="")`
`modal`	`modal.html`	`modal(id, class="")` — call block
`page_loader`	`page_loader.html`	`page_loader(color="#6366f1", bg="#f9fafb")`
`prompt_modal`	`prompt_modal.html`	`prompt_modal()` — backs `window.showPrompt()`
`spinner`	`spinner.html`	`spinner(size="md", color="currentColor")`
`toast`	`toast.html`	`toast()` — the toast container

Never guess a macro’s arguments. feather components reads them from the macros themselves, so it is right even when documentation is not.

Call blocks

card and modal wrap their contents, so use {% call %}:

{% from "components/card.html" import card %}

{% call card(class="mt-4") %}
    <h2>Title</h2>
{% endcall %}

Overriding a component

Create your own version in templates/components/ using the same filename. The template loader resolves yours first at runtime, and feather components lists it alongside the framework’s, marked as overriding.

⌘I