<Button> is the standard button component. Supports types, sizes, icons, loading state, permission gating, tooltips, and analytics events.

`<Button>`

The standard button used everywhere in the LogisBase Console. Supports semantic types, sizes, icons, loading state, built-in permission checks, tooltips, and analytics events.

Basic Usage

<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}} />

Arguments

Visual

Argument	Type	Default	Description
`@type`	string	`default`	Visual variant — `default`, `primary`, `secondary`, `success`, `warning`, `danger`, `magic`
`@size`	string	`sm`	`xs`, `sm`, `md`, `lg`, `xl`
`@text`	string	—	Button label
`@outline`	boolean	`false`	Render the outline variant
`@responsive`	boolean	`false`	Hide the text on small screens (icon-only on `sm:`)
`@wrapperClass`	string	—	Extra classes on the outer wrapper
`@textClass`	string	—	Extra classes on the text span
`@buttonType`	string	`button`	The native `type` attribute — `button`, `submit`, `reset`

Icon

Argument	Type	Default	Description
`@icon`	string	—	FontAwesome icon name (e.g. `save`, `trash`, `plus`)
`@iconPrefix`	string	—	FontAwesome prefix — `fas`, `far`, `fab`, etc.
`@iconSize`	string	—	Forwarded to `<FaIcon>` (`xs`, `sm`, `lg`, `2x`, etc.)
`@iconRotation`	number	—	90 / 180 / 270
`@iconFlip`	string	—	`horizontal` / `vertical` / `both`
`@iconSpin`	boolean	—	Spin the icon
`@iconClass`	string	—	Extra classes on the icon

Loading State

Argument	Type	Default	Description
`@isLoading`	boolean	`false`	Show a spinner instead of the icon and disable the button
`@loaderWidth`	number	`14`	Spinner width in px
`@loaderHeight`	number	`14`	Spinner height in px

Disabled / Visibility

Argument	Type	Default	Description
`@disabled`	boolean	`false`	Disable the button
`@visible`	boolean	`true`	When `false`, nothing renders

Permissions

Argument	Type	Description
`@permission`	string	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
`@helpText`	string	—	Tooltip text shown on hover
`@exampleText`	string	—	Optional example shown beneath the help text
`@tooltipPlacement`	string	`top`	`top`, `bottom`, `left`, `right`

Callbacks

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

Analytics

Argument	Type	Description
`@eventName`	string	If set, calls `events.trackEvent(eventName, ...eventArgs)` on click before invoking `@onClick`
`@eventArgs`	array	Args to pass to `trackEvent`

Permission Gating

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.

Loading State

<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.

Yielding Custom Content

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>

Real-World Examples

{{! 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}}
/>

Source

File	Description
`addon/components/button.hbs`	Template
`addon/components/button.js`	Class

Button

On this page