diff --git a/docs/api/fab.md b/docs/api/fab.md
index 8c20a763770..13be8564843 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -41,6 +41,32 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
+### Safe Area
+
+If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables).
+
+When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set:
+
+```css
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+}
+```
+
+And when using a fab with `vertical` set to `"bottom"` without an `ion-footer`, the bottom margin needs to be set:
+
+```css
+ion-fab {
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
+
+If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
+
+import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
+
+
+
## Button Sizing
Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
@@ -68,7 +94,6 @@ import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-pr
import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
-
## Accessibility
diff --git a/static/usage/v7/fab/safe-area/angular/example_component_css.md b/static/usage/v7/fab/safe-area/angular/example_component_css.md
new file mode 100644
index 00000000000..a19373c3cc5
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
diff --git a/static/usage/v7/fab/safe-area/angular/example_component_html.md b/static/usage/v7/fab/safe-area/angular/example_component_html.md
new file mode 100644
index 00000000000..3ba464d7f58
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/safe-area/angular/global_css.md b/static/usage/v7/fab/safe-area/angular/global_css.md
new file mode 100644
index 00000000000..d1b434fa246
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/angular/global_css.md
@@ -0,0 +1,10 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+}
+```
diff --git a/static/usage/v7/fab/safe-area/demo.html b/static/usage/v7/fab/safe-area/demo.html
new file mode 100644
index 00000000000..998593d9ca7
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/fab/safe-area/index.md b/static/usage/v7/fab/safe-area/index.md
new file mode 100644
index 00000000000..d8f761227c6
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v7/fab/safe-area/javascript.md b/static/usage/v7/fab/safe-area/javascript.md
new file mode 100644
index 00000000000..4585b8d545c
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/safe-area/react/main_css.md b/static/usage/v7/fab/safe-area/react/main_css.md
new file mode 100644
index 00000000000..ecbcce54651
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/react/main_css.md
@@ -0,0 +1,15 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+}
+
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
diff --git a/static/usage/v7/fab/safe-area/react/main_tsx.md b/static/usage/v7/fab/safe-area/react/main_tsx.md
new file mode 100644
index 00000000000..d5a790048e7
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import { add } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/safe-area/vue.md b/static/usage/v7/fab/safe-area/vue.md
new file mode 100644
index 00000000000..1127a3128db
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```