Button <Button> is the standard button component. Supports types, sizes, icons, loading state, permission gating, tooltips, and analytics events.
The standard button used everywhere in the Fleetbase Console. Supports semantic types, sizes, icons, loading state, built-in permission checks, tooltips, and analytics events.
< Button @ text= "Save" @ onClick= {{ this.save }} /> < Button @ type= "primary" @ icon= "save" @ text= "Save Changes" @ onClick= {{ this.save }} /> < Button @ type= "danger" @ icon= "trash" @ text= "Delete" @ onClick= {{ this.delete }} /> Argument Type Default Description @typestring defaultVisual variant — default, primary, secondary, success, warning, danger, magic @sizestring smxs, sm, md, lg, xl@textstring — Button label @outlineboolean falseRender the outline variant @responsiveboolean falseHide the text on small screens (icon-only on sm:) @wrapperClassstring — Extra classes on the outer wrapper @textClassstring — Extra classes on the text span @buttonTypestring buttonThe native type attribute — button, submit, reset
Argument Type Default Description @iconstring — FontAwesome icon name (e.g. save, trash, plus) @iconPrefixstring — FontAwesome prefix — fas, far, fab, etc. @iconSizestring — Forwarded to <FaIcon> (xs, sm, lg, 2x, etc.) @iconRotationnumber — 90 / 180 / 270 @iconFlipstring — horizontal / vertical / both@iconSpinboolean — Spin the icon @iconClassstring — Extra classes on the icon
Argument Type Default Description @isLoadingboolean falseShow a spinner instead of the icon and disable the button @loaderWidthnumber 14Spinner width in px @loaderHeightnumber 14Spinner height in px
Argument Type Default Description @disabledboolean falseDisable the button @visibleboolean trueWhen false, nothing renders
Argument Type Description @permissionstring If the current user lacks this ability, the button is auto-disabled and a "Unauthorized" tooltip is shown. Uses ember-can
Argument Type Default Description @helpTextstring — Tooltip text shown on hover @exampleTextstring — Optional example shown beneath the help text @tooltipPlacementstring toptop, bottom, left, right
Argument Signature Description @onClick(event)Called on click. Skipped when the button is disabled or loading @onInsert()Called once after the button is inserted into the DOM
Argument Type Description @eventNamestring If set, calls events.trackEvent(eventName, ...eventArgs) on click before invoking @onClick @eventArgsarray Args to pass to trackEvent
Pass @permission to gate the button on an ember-can ability:
< Button @ type= "danger" @ icon= "trash" @ text= "Delete" @ permission= "fleet-ops delete-driver" @ onClick= {{ this.delete }} /> If the current user can't delete drivers, the button renders disabled with a "Unauthorized" tooltip — your @onClick will not fire even if disabling is somehow bypassed.
< Button @ type= "primary" @ icon= "save" @ text= "Save" @ isLoading= {{ this.isSaving }} @ onClick= {{ this.save }} /> While loading, the icon is replaced with a spinner, the button is disabled, and clicks are ignored.
If @text is not enough — e.g. you need an icon between two pieces of text — yield a block:
< Button @ type= "primary" @ onClick= {{ this.send }} > Send < FaIcon @ icon= "paper-plane" class= "ml-2" /> </ Button > {{!-- Standard primary save button --}} < Button @ type= "primary" @ icon= "save" @ text= "Save" @ isLoading= {{ this.isSaving }} @ onClick= {{ this.save }} /> {{!-- Destructive action with permission check --}} < Button @ type= "danger" @ icon= "trash" @ text= "Delete" @ permission= "fleet-ops delete-driver" @ helpText= "Permanently delete this driver" @ onClick= {{ this.confirmDelete }} /> {{!-- Submit button inside a form --}} < Button @ buttonType= "submit" @ type= "primary" @ text= "Submit" /> {{!-- Icon-only "Add" button --}} < Button @ type= "primary" @ icon= "plus" @ size= "xs" @ onClick= {{ this.addRow }} /> {{!-- Responsive button — full text on desktop, icon-only on mobile --}} < Button @ type= "primary" @ icon= "filter" @ text= "Filters" @ responsive= {{ true }} @ onClick= {{ this.openFilters }} /> {{!-- Outline variant --}} < Button @ type= "primary" @ outline= {{ true }} @ text= "Cancel" @ onClick= {{ this.cancel }} />
