> ## Documentation Index
> Fetch the complete documentation index at: https://docs.featherframework.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Server-rendered Jinja2 macros for buttons, cards, modals, inputs and more — every one overridable in your own app.

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

```html theme={null}
{% 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                                                                                |

<Tip>
  Never guess a macro's arguments. [`feather components`](/tooling/components-catalogue)
  reads them from the macros themselves, so it is right even when documentation is not.
</Tip>

## Call blocks

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

```html theme={null}
{% 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.