Components

Import a component

Pull in an .htmx fragment with <import>, then use its as name as a regular tag.

<import src="@/components/button" as="my-button"/>

<my-button label="Click me" />

Forwarding props

Any attribute on the usage tag — including hx-* ones — is available inside the component as a Handlebars variable.

<!-- app/components/button.htmx -->
<button {{#if hx-post}}hx-post="{{hx-post}}"{{/if}}>
  {{#if label}}{{label}}{{else}}Click me{{/if}}
</button>

<!-- usage -->
<my-button hx-post="/greet" label="Say hello" />