HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ButtonView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorTriggers an action, submits a form, or navigates.StableSince 0.1.0ActionsUsageimport'@fusion.dev/helix/button'import'@fusion.dev/helix-headless/button'Preview
API ReferenceRoothelix-buttonTriggers an action, submits a form, or navigates.
PropTypeDefaultDescriptioncommandstring""What to send when the button is activated, and what to send it to.commandForstring""The id of the element the command is sent to.commandForElementElement|nullThe element this button's command is sent to, resolved.disabledbooleanfalseWhether the control is non-interactive.emphasis"ghost"|"outlined"|"solid"|"subtle"How filled it is drawn.expandedbooleanWhether this button is a disclosure trigger, and whether its panel is open.focusablebooleantrueWhether the button holds its group's tab stop.formActionstring""Where this button's submission goes, overriding the form's own.formEnctypestring""How the submission is encoded, overriding the form's own.formMethodstring""Which HTTP method the submission uses, overriding the form's own.formNoValidatebooleanfalseWhether this submission skips the form's validation.formTargetstring""Which browsing context the response lands in, overriding the form's own.labelstring""Accessible name, for a button whose content is not text.namestring""Name submitted with the form.tone"accent"|"danger"|"neutral"|"primary"What it means.type"button"|"submit"|"reset""button"What activating the button does to its form.valuestring""What this button submits under its own `name`, the way a native submitter does.width"auto"|"full"|"standard"How much of the space available to it the button takes.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The button's label.endContent after the label.startContent before the label, usually an icon.
PartDescriptionbuttonThe inner control.
CSS PropertyDescription--button-background-colorFill behind the button, in every state.--button-background-color-hoverFill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover.--button-foreground-colorLabel and icon color.--button-gapSpace between the label and whatever flanks it.--button-inline-sizeWidth taken by `width="standard"`.--button-padding-inlineInline padding, for a container whose rhythm is not the control default.--button-radiusCorner radius of the control.--button-radius-endTrailing corners, which a group flattens.--button-radius-end-endThe bottom trailing corner, for a group stacking down.--button-radius-end-startThe bottom leading corner, for a group stacking down.--button-radius-startLeading corners, which a group flattens.--button-radius-start-endThe top trailing corner, for a group stacking down.--button-radius-start-startThe top leading corner, for a group stacking down.--button-sizeHeight of the control, for a container whose row is not one of the density steps.
Roothelix-headless-buttonTriggers an action, submits a form, or navigates.
PropTypeDefaultDescriptioncommandstring""What to send when the button is activated, and what to send it to.commandForstring""The id of the element the command is sent to.commandForElementElement|nullThe element this button's command is sent to, resolved.disabledbooleanfalseWhether the control is non-interactive.expandedbooleanWhether this button is a disclosure trigger, and whether its panel is open.focusablebooleantrueWhether the button holds its group's tab stop.formActionstring""Where this button's submission goes, overriding the form's own.formEnctypestring""How the submission is encoded, overriding the form's own.formMethodstring""Which HTTP method the submission uses, overriding the form's own.formNoValidatebooleanfalseWhether this submission skips the form's validation.formTargetstring""Which browsing context the response lands in, overriding the form's own.labelstring""Accessible name, for a button whose content is not text.namestring""Name submitted with the form.type"button"|"submit"|"reset""button"What activating the button does to its form.valuestring""What this button submits under its own `name`, the way a native submitter does.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The button's label.endContent after the label.startContent before the label, usually an icon.
PartDescriptionbuttonThe inner control.
ExamplesNameDescriptionAccentA second emphasis, derived from the brand rather than picked beside it.AppearancesEvery fill against every tone.As LinkA button that navigates, which is an anchor wearing a button's clothes.DisabledDisabled across the appearances, so the difference is visible in each.HuggingButtons in a narrow column, where the label decides whether it wraps.PreviewThe appearances and tones together, showing which two axes a button has.PreviewThe appearances and tones together, showing which two axes a button has.TonesThe four tones, each saying what the action means rather than how loud it is.WidthA button that takes the width it is given rather than the width of its label.With IconAn icon before the label, and an icon after it.