`Inline`¶

Arrange related children in a wrapping horizontal row.


Import	`from hedron import Inline`
Distribution	`hedron`
Backend activity	No
Normal render mode	`RenderMode.FRAGMENT`

Live demo¶

PythonHTMXFastAPI

The preview is a local docs simulation (not a running Hedron server). Interactive demos show a “Simulated HTMX” trace when applicable.

Basic use¶

from hedron import Button, Inline, LinkButton
component = Inline(Button('Save'), LinkButton('Cancel', '/account'), gap='md')

Compose under Page for full documents, or return from a fragment route for HTMX swaps.

How it works¶

Inline expresses one-dimensional horizontal composition while allowing the theme to wrap items at narrow widths. It emits data attributes rather than unsafe inline style.

This component's core behavior is server-rendered HTML and does not require a browser runtime. The preview is ordinary semantic HTML, so keyboard, form, link, and disclosure behavior comes from the platform.

Constructor and parameters¶

Inline(*nodes, children=None, gap='0.5rem', id=None, class_=None)

Parameter	Type	Meaning
`nodes`	`NodeLike`	Positional inline items in DOM order.
`children`	`NodeLike \| sequence \| None`	Keyword child list; combines with positional nodes.
`gap`	`CSS length`	Validated spacing token.
`id`	`str \| None`	Stable DOM target for the row.
`class_`	`str \| None`	Optional class appended to `hedron-inline`.

Composition and backend behavior¶

Keep Inline at the smallest semantic boundary. Fragment routes should return only the replaced region and preserve stable target IDs across success, validation, empty, loading, and error responses.

Inline is primarily presentational; keep any mutation on an explicit action or component route.

Accessibility¶

Ensure controls remain understandable when the row wraps and do not communicate meaning using position alone.

Security¶

Escaping and SafeUrl / TrustedHtml are framework concerns; authorization and data exposure remain application code. Redact secrets before rendering.

Common mistakes¶

Do not assume an Inline will stay on one physical line on small screens.
Do not copy docs-preview JavaScript into an application server.

Testing¶

from hedron import RenderMode, render

result = render(component, mode=RenderMode.FRAGMENT)
assert result.html
assert not result.diagnostics

All component demos · Built-in API · Testing

Inline¶