Live demo — this example is server-driven; run the showcase locally for the interactive version.

Button

Use Button straight from a Qute template — parameters and slots instead of Java builders. This reference is generated from the runtime template sources: each template documents its parameters and slots in the header comment shown beneath its include line.

Templates

button

{#include components/actions/button /}
Button — PatternFly v6 
                                                                                  
 Renders as <button>, <a> (when href is set), or a custom element (component).    
                                                                                  
 Parameters:                                                                      
   id            (optional) — DOM id on the root; omit unless something else      
                              references the button (e.g. a popover/menu trigger).
   variant       (optional) — primary (default) | secondary | tertiary | danger | 
                              warning | link | plain | control | stateful.        
                              Not applied when hamburger/favorite/settings is set 
                              (those imply their own plain variant).              
   danger        (optional) — boolean; pf-m-danger accent alongside the link or   
                              secondary variant (PF isDanger).                    
   size          (optional) — sm | lg. Default size is unmodified.                
   circle        (optional) — boolean; pf-m-circle (circular icon-only button).   
   block         (optional) — boolean; pf-m-block                                 
   inline        (optional) — boolean; pf-m-inline. Used with variant="link".     
   disabled      (optional) — boolean; renders the HTML disabled attribute.       
   ariaDisabled  (optional) — boolean; renders aria-disabled but keeps focusable. 
   clicked       (optional) — boolean; pf-m-clicked (active styling).             
   hasNoPadding  (optional) — boolean; pf-m-no-padding (only meaningful for plain)
   isLoading     (optional) — boolean; pf-m-progress + pf-m-in-progress + spinner 
   spinnerLabel  (optional) — aria-label on the loading spinner                   
   component     (optional) — element override: "span" (or any other tag) makes   
                              the button render as that tag. Default is "button"  
                              (or "a" when href is set).                          
   href          (optional) — link target. When set, renders <a> by default.     
   type          (optional) — submit | reset (default "button" for <button>)     
   ariaLabel     (optional) — accessible label                                    
   ariaExpanded  (optional) — true | false. For toggling buttons (hamburger etc.) 
   attrs         (optional) — raw attribute passthrough rendered verbatim into    
                              the opening tag (Alpine directives, data-*, etc.).  
                              CAUTION: inherits through nested includes like any  
                              Qute data — composers that nest this include inside 
                              another attrs-bearing include should shadow it with 
                              attrs='' (see feedback_qute_include_inheritance).   
                                                                                  
   icon          (optional) — icon name (set:slug) to render inside __icon span. 
   iconPosition  (optional) — start (default) | end                                
                                                                                  
   count         (optional) — integer. Renders __count badge to the end.         
   countRead     (optional) — boolean; adds pf-m-read on the count badge.        
                                                                                  
   stateful      (optional) — boolean; pf-m-stateful                              
   state         (optional) — read | unread | attention (for stateful)            
                                                                                  
   favorite      (optional) — boolean; pf-m-favorite (implies pf-m-plain).        
   favorited     (optional) — boolean; pf-m-favorited.                            
   settings      (optional) — boolean; pf-m-settings (implies pf-m-plain).        
                                                                                  
   hamburger        (optional) — boolean; pf-m-hamburger (implies pf-m-plain).    
   hamburgerVariant (optional) — expand | collapse. Adds pf-m-{value}.            
   hamburgerExpandExpr (optional) — Alpine state var (e.g. "sidebarOpen"): emits  
                              the toggle binding trio (:class pf-m-expand,        
                              :aria-expanded, @click). Composition sites use this 
                              because attrs='...' literals cannot carry the       
                              single-quoted class name.                           
                                                                                  
 Slot:                                                                            
   {#content} — button text (wrapped in pf-v6-c-button__text), or omit for        
                icon-only buttons.                                                
 Guard `component`: example-card and other wrappers pass component=<slug>     
 through Qute include-data inheritance, so we only treat it as a tag         
 override when it's an allow-listed value (`span` / `div` are the actual     
 supported overrides). See memory feedback_qute_include_inheritance.         
 Model mode: pass btn=<org.sitenetsoft.quarkus.pha.model.Button> (built via
   Button.of/icon/favorite/settings/hamburger builders) — mirrors the full parameter
   surface below. Composite templates that delegate their buttons here may pass
   btnAttrs='...' (raw attribute passthrough, e.g. Alpine bindings) — named
   distinctly from attrs so param-mode attrs never leaks in via include-data
   inheritance.

button-body

{#include components/actions/button-body /}
Button body — internal helper for components/actions/button. 
 Renders the icon + text + count subelements in the right order. 
 Not intended for direct use; included by button.html.