diff --git a/app/components/button.hbs b/app/components/button.hbs
index aa15bff..67e6770 100644
--- a/app/components/button.hbs
+++ b/app/components/button.hbs
@@ -19,8 +19,10 @@
   {{on "click" this.handleClick}}
   ...attributes
 >
-  {{#if this.icon}}
-    <this.icon class="mx-1"/>
+  {{#if this.isPending}}
+    <MdIcon::Loading @spin={{true}} class="mx-1"/>
+  {{else if @icon}}
+    <@icon class="mx-1"/>
   {{/if}}
   {{#if this.text}}
     <span class="mx-1">{{this.text}}</span>
diff --git a/app/components/button.js b/app/components/button.js
index 1946e39..961b0d3 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { ClockOutline, Check, AlertCircleOutline } from 'ember-mdi/icons';
 
 export default class ButtonComponent extends Component {
   @tracked _state = 'default';
@@ -26,18 +25,6 @@ export default class ButtonComponent extends Component {
     return this.args.type ?? 'button';
   }
 
-  get icon() {
-    if (this.isPending) {
-      return this.args.pendingIcon ?? ClockOutline;
-    } else if (this.isFulfilled) {
-      return this.args.fulfilledIcon ?? Check;
-    } else if (this.isRejected) {
-      return this.args.rejectedIcon ?? AlertCircleOutline;
-    }
-
-    return this.args.icon ?? null;
-  }
-
   get state() {
     return this.args.state ?? this._state;
   }
@@ -62,7 +49,7 @@ export default class ButtonComponent extends Component {
   }
 
   get text() {
-    return this.args[`${this.state}Text`] || this.args.text;
+    return this.args[`${this.state}Text`] ?? this.args.text;
   }
 
   @action
@@ -71,13 +58,17 @@ export default class ButtonComponent extends Component {
       return;
     }
 
-    this.state = 'pending';
-
     try {
-      await this.args.onClick(this.args.value);
+      const maybePromise = this.args.onClick(this.args.value);
 
-      if (!this.isDestroyed) {
-        this.state = 'fulfilled';
+      if (typeof maybePromise?.then === 'function') {
+        this.state = 'pending';
+
+        await maybePromise;
+
+        if (!this.isDestroyed) {
+          this.state = 'fulfilled';
+        }
       }
     } catch (error) {
       if (!this.isDestroyed) {