Clickable button with a styled text label.
A convenience wrapper around an HStack with onClick containing a styled Text node. Focusable by default — reachable via Tab and activated with Enter.
HStack
onClick
Text
Style props are set on the container, not the text — this means bgColor fills the button rect and focusStyle can override any style when focused.
bgColor
focusStyle
Button text.
Click handler, styling, and focus configuration.
A clickable container node.
// Basic styled buttonButton("[Send]", { onClick: handleSend, bold: true, fgColor: "color06" }) Copy
// Basic styled buttonButton("[Send]", { onClick: handleSend, bold: true, fgColor: "color06" })
// Button with focus style (keyboard navigation)Button("[OK]", { onClick: handleOk, bgColor: "color08", focusStyle: { bgColor: "color02", fgColor: "color00" },}) Copy
// Button with focus style (keyboard navigation)Button("[OK]", { onClick: handleOk, bgColor: "color08", focusStyle: { bgColor: "color02", fgColor: "color00" },})
// Mouse-only button (not in Tab order)Button("✕", { onClick: handleClose, focusable: false }) Copy
// Mouse-only button (not in Tab order)Button("✕", { onClick: handleClose, focusable: false })
Clickable button with a styled text label.
A convenience wrapper around an
HStackwithonClickcontaining a styledTextnode. Focusable by default — reachable via Tab and activated with Enter.Style props are set on the container, not the text — this means
bgColorfills the button rect andfocusStylecan override any style when focused.