diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 9b7542ad3f..62d7f5a709 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -239,12 +239,12 @@ export class Fab {
 }
 
 export declare interface FabButton extends StencilComponents<'IonFabButton'> {}
-@Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'href', 'translucent', 'show'] })
+@Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'routerDirection', 'href', 'translucent', 'show'] })
 export class FabButton {
 
   constructor(r: ElementRef) {
     const el = r.nativeElement;
-    proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'href', 'translucent', 'show']);
+    proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'routerDirection', 'href', 'translucent', 'show']);
   }
 }
 
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 7454fc1210..b8b9b8fea9 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1398,6 +1398,10 @@ export namespace Components {
     */
     'mode': Mode;
     /**
+    * When using a router, it specifies the transition direction when navigating to another page using `href`.
+    */
+    'routerDirection'?: RouterDirection;
+    /**
     * If true, the fab button will show when in a fab-list.
     */
     'show': boolean;
@@ -1428,6 +1432,10 @@ export namespace Components {
     */
     'mode'?: Mode;
     /**
+    * When using a router, it specifies the transition direction when navigating to another page using `href`.
+    */
+    'routerDirection'?: RouterDirection;
+    /**
     * If true, the fab button will show when in a fab-list.
     */
     'show'?: boolean;
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index f0dac8beed..9897521397 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Prop } from '@stencil/core';
 
-import { Color, CssClassMap, Mode } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
+import { createColorClasses, openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-fab-button',
@@ -14,6 +14,8 @@ import { createColorClasses } from '../../utils/theme';
 export class FabButton {
   private inList = false;
 
+  @Prop({ context: 'window' }) win!: Window;
+
   @Element() el!: HTMLElement;
 
   /**
@@ -39,6 +41,12 @@ export class FabButton {
    */
   @Prop() disabled = false;
 
+  /**
+   * When using a router, it specifies the transition direction when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerDirection?: RouterDirection;
+
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.
    * If this property is set, an anchor tag will be rendered.
@@ -94,6 +102,7 @@ export class FabButton {
         class="fab-button-native"
         disabled={this.disabled}
         href={this.href}
+        onClick={ev => openURL(this.win, this.href, ev, this.routerDirection)}
       >
         <span class="fab-button-close-icon">
           <ion-icon name="close" lazy={false}></ion-icon>
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index a630aec757..f659f83b34 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -9,15 +9,16 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 
 ## Properties
 
-| Property      | Attribute     | Description                                                                                                                                                                                                                                                            | Type      |
-| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| `activated`   | `activated`   | If true, the fab button will be show a close icon. Defaults to `false`.                                                                                                                                                                                                | `boolean` |
-| `color`       | `color`       | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`   |
-| `disabled`    | `disabled`    | If true, the user cannot interact with the fab button. Defaults to `false`.                                                                                                                                                                                            | `boolean` |
-| `href`        | `href`        | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string`  |
-| `mode`        | `mode`        | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`    |
-| `show`        | `show`        | If true, the fab button will show when in a fab-list.                                                                                                                                                                                                                  | `boolean` |
-| `translucent` | `translucent` | If true, the fab button will be translucent. Defaults to `false`.                                                                                                                                                                                                      | `boolean` |
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type              |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `activated`       | `activated`        | If true, the fab button will be show a close icon. Defaults to `false`.                                                                                                                                                                                                | `boolean`         |
+| `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`           |
+| `disabled`        | `disabled`         | If true, the user cannot interact with the fab button. Defaults to `false`.                                                                                                                                                                                            | `boolean`         |
+| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string`          |
+| `mode`            | `mode`             | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`            |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                               | `RouterDirection` |
+| `show`            | `show`             | If true, the fab button will show when in a fab-list.                                                                                                                                                                                                                  | `boolean`         |
+| `translucent`     | `translucent`      | If true, the fab button will be translucent. Defaults to `false`.                                                                                                                                                                                                      | `boolean`         |
 
 
 ----------------------------------------------