Docs Playground

Getting started

Language

Page Header Footer Section Article Nav Aside OrderedList UnorderedList ListItem Details Summary Box Grid Column Row Text Span Header1 Header2 Header3 Header4 Header5 Header6 Link Button Image Input Markup

Class Display Position Width Height Margin Margin X Margin Y Max Width Min Width Max Height Min Height Opacity Size Padding Padding X Padding Y Spacing Spacing X Spacing Y Grid Columns Grid Rows Justify Align Border Radius Selection Weight Shadow Overflow Cursor Z Index Inset Top Right Bottom Left Background Color Text Alignment Leading Tracking Border Border Color Outline Color Ring Color Placeholder Color Accent Color Transition Duration Aspect Object Fit Horizontal Alignment Vertical Alignment Text Content ID Href Target Source Alt Type Name Value Placeholder HX Get HX Post HX Target HX Swap HX Trigger HX Include HX Confirm Post Include Replace Update Append To Prepend To

If Statements Conditional Values For Loops

Scoped Properties

Hover Focus Active Disabled Dark

Styles Custom components

Button

Button renders <button> for an interactive button.

Example

Button {
    Text { text: "Content" }
}

Use QTML styling, attribute, and HTMX properties where they are supported.