diff --git a/components/floatingactionbutton/appearance.md b/components/floatingactionbutton/appearance.md
new file mode 100644
index 0000000000..ae0bfe76d3
--- /dev/null
+++ b/components/floatingactionbutton/appearance.md
@@ -0,0 +1,129 @@
+---
+title: Appearance
+page_title: Floating Action Button Appearance
+description: Explore the appearance settings of the Floating Action Button for Blazor. See the available options that allow you to fully customize the look of the Floating Action Button component. 
+slug: fab-appearance
+tags: telerik,blazor,floating action button, appearance
+published: True
+position: 1
+---
+
+# Appearance Settings
+
+The Floating Action Button component features built-in appearance parameters that allow you to customize virtually every aspect of its look and feel. The example at the bottom of the page lets you experiment with the available parameters.
+
+## Rounded
+
+The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full` (default)|
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
+
+| Class members | Manual declarations |
+|---------------|--------|
+| `Small`   |`sm`|
+| `Medium`   |`md` (default)|
+| `Large`   |`lg`|
+
+## ThemeColor
+
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Base` <br /> (default) |`base`|
+|`Primary`|`primary`|
+|`Secondary`|`secondary`|
+|`Tertiary`|`tertiary`|
+|`Info`|`info`|
+|`Success`|`success`|
+|`Warning`|`warning`|
+|`Error`|`error`|
+|`Dark`|`dark`|
+|`Light`|`light`|
+|`Inverse`|`inverse`|
+
+## Example
+
+````RAZOR
+<div class="k-flex-basis-auto">
+    <label>
+        Theme Color
+        <TelerikDropDownList Data="@ThemeColors" @bind-Value="@ThemeColor">
+            <DropDownListSettings>
+                <DropDownButtonPopupSettings MaxHeight="auto" />
+            </DropDownListSettings>
+        </TelerikDropDownList>
+    </label>
+    <label>
+        Rounded
+        <TelerikDropDownList Data="@RoundedValues" @bind-Value="@Rounded">
+            <DropDownListSettings>
+                <DropDownButtonPopupSettings MaxHeight="auto" />
+            </DropDownListSettings>
+        </TelerikDropDownList>
+    </label>
+    <label>
+        Size
+        <TelerikDropDownList Data="@Sizes" @bind-Value="@Size">
+            <DropDownListSettings>
+                <DropDownButtonPopupSettings MaxHeight="auto" />
+            </DropDownListSettings>
+        </TelerikDropDownList>
+    </label>
+</div>
+
+<TelerikFloatingActionButton ThemeColor="@ThemeColor"
+                             Rounded="@Rounded"
+                             Size="@Size"
+                             HorizontalAlign="@FloatingActionButtonHorizontalAlign.End"
+                             VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
+                             Icon="SvgIcon.Play" />
+
+@code {
+    private string ThemeColor { get; set; } = ThemeConstants.Button.ThemeColor.Primary;
+    private List<string> ThemeColors { get; set; } = new List<string>()
+    {
+        ThemeConstants.Button.ThemeColor.Base,
+        ThemeConstants.Button.ThemeColor.Primary,
+        ThemeConstants.Button.ThemeColor.Secondary,
+        ThemeConstants.Button.ThemeColor.Tertiary,
+        ThemeConstants.Button.ThemeColor.Info,
+        ThemeConstants.Button.ThemeColor.Success,
+        ThemeConstants.Button.ThemeColor.Warning,
+        ThemeConstants.Button.ThemeColor.Error,
+        ThemeConstants.Button.ThemeColor.Dark,
+        ThemeConstants.Button.ThemeColor.Light,
+        ThemeConstants.Button.ThemeColor.Inverse
+    };
+
+    private string Rounded { get; set; } = ThemeConstants.Button.Rounded.Full;
+    private List<string> RoundedValues { get; set; } = new List<string>()
+    {
+        ThemeConstants.Button.Rounded.Small,
+        ThemeConstants.Button.Rounded.Medium,
+        ThemeConstants.Button.Rounded.Large,
+        ThemeConstants.Button.Rounded.Full
+    };
+
+    private string Size { get; set; } = ThemeConstants.Button.Size.Medium;
+    private List<string> Sizes { get; set; } = new List<string>()
+    {
+        ThemeConstants.Button.Size.Small,
+        ThemeConstants.Button.Size.Medium,
+        ThemeConstants.Button.Size.Large
+    };
+}
+````
+
+## See Also
+
+* [Appearance - Design System Docs](https://www.telerik.com/design-system/docs/components/floatingactionbutton/#appearance)
\ No newline at end of file
diff --git a/components/floatingactionbutton/events.md b/components/floatingactionbutton/events.md
new file mode 100644
index 0000000000..d985aa2112
--- /dev/null
+++ b/components/floatingactionbutton/events.md
@@ -0,0 +1,82 @@
+---
+title: Events
+page_title: Floating Action Button - Events
+description: Events of the Floating Action Button for Blazor.
+slug: fab-events
+tags: telerik,blazor,floating action button,events
+published: True
+position: 3
+---
+
+# Button Events
+
+This article explains the events available in the Telerik Floating Action Button for Blazor:
+
+* [OnClick](#onclick)
+
+## OnClick 
+
+The `OnClick` event fires when the user clicks or taps the button.
+
+It receives argument of type [MouseEventArgs](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.mouseeventargs?view=aspnetcore-5.0).
+
+>caption Handle the button click
+
+````RAZOR
+<TelerikFloatingActionButton Id="floating-action-button"
+                             Icon="@((IsPopupVisible ? SvgIcon.Minus : SvgIcon.Plus))"
+                             VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
+                             HorizontalAlign="@FloatingActionButtonHorizontalAlign.Center"
+                             OnClick="@TogglePopup" />
+
+<TelerikPopup @ref="@PopupRef"
+              AnchorSelector="#floating-action-button"
+              AnimationType="@AnimationType.SlideDown"
+              AnimationDuration="200">
+    <div class="k-d-flex k-flex-col k-gap-1.5 k-p-1.5 k-flex-wrap k-align-content-around">
+        <TelerikButton Icon="@SvgIcon.Download"
+                       Rounded="@ThemeConstants.Button.Rounded.Full"
+                       FillMode="@ThemeConstants.Button.FillMode.Flat"
+                       ThemeColor="@ThemeConstants.Button.ThemeColor.Info"
+                       Size="@ThemeConstants.Button.Size.Large"
+                       Title="Download" />
+        <TelerikButton Icon="@SvgIcon.Trash"
+                       Rounded="@ThemeConstants.Button.Rounded.Full"
+                       FillMode="@ThemeConstants.Button.FillMode.Flat"
+                       ThemeColor="@ThemeConstants.Button.ThemeColor.Error"
+                       Size="@ThemeConstants.Button.Size.Large"
+                       Title="Delete" />
+        <TelerikButton Icon="@SvgIcon.Upload"
+                       Rounded="@ThemeConstants.Button.Rounded.Full"
+                       FillMode="@ThemeConstants.Button.FillMode.Flat"
+                       ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
+                       Size="@ThemeConstants.Button.Size.Large"
+                       Title="Upload" />
+    </div>
+</TelerikPopup>
+
+<style>
+    .k-popup {
+        border-radius: 23px;
+    }
+</style>
+
+@code {
+    private bool IsPopupVisible { get; set; }
+    private TelerikPopup? PopupRef { get; set; }
+
+    private void TogglePopup()
+    {
+        if (IsPopupVisible)
+        {
+            PopupRef?.Hide();
+        }
+        else
+        {
+            PopupRef?.Show();
+        }
+
+        IsPopupVisible = !IsPopupVisible;
+    }
+}
+````
diff --git a/components/floatingactionbutton/overview.md b/components/floatingactionbutton/overview.md
new file mode 100644
index 0000000000..4d4d909c6f
--- /dev/null
+++ b/components/floatingactionbutton/overview.md
@@ -0,0 +1,93 @@
+---
+title: Overview
+page_title: Floating Action Button Overview
+description: Discover the FloatingActionButton component for Blazor. Learn how to add the component to your app and explore its configuration options, such as positioning and alignment.
+slug: fab-overview
+tags: telerik,blazor,floating action button
+published: True
+position: 0
+---
+
+# Blazor Floating Action Button Overview
+
+The <a href="https://www.telerik.com/blazor-ui/floating-action-button" target="_blank">Blazor Floating Action Button</a> is a UI component that shows over the other page content and may not move during scrolling. The component can perform the most logical action expected from a user looking at a particular screen. You can configure the FloatingActionButton to display:
+
+* A single button with a single action
+* Additional related actions
+* Speed dial actions
+
+The Floating Action Button comes with built-in customization features that lets you fine-tune the [positioning and alignment](slug://fab-positions) of the component, customize its [appearance](slug://fab-appearance), use icons, and attach click [events](slug://fab-events).
+
+## Creating Blazor Floating Action Button
+
+1. Use the `<TelerikFloatingActionButton>` tag to add the component to your razor page.
+2. (optional) Customize the [appearance](slug://fab-appearance) of the Telerik Blazor Floating Action Button.
+
+>caption Basic Blazor Floating Action Button
+
+````RAZOR
+Current time: @Result
+<TelerikFloatingActionButton Size="@ThemeConstants.Button.Size.Large"
+                             VerticalAlign="@FloatingActionButtonVerticalAlign.Top"
+                             HorizontalAlign="@FloatingActionButtonHorizontalAlign.Center"
+                             ThemeColor="@ThemeConstants.Button.ThemeColor.Info"
+                             Icon="@SvgIcon.Clock"
+                             OnClick="@HandleClickEvent" />
+@code {
+    private string Result { get; set; } = DateTime.Now.ToString("HH:MM:ss:fff");
+
+    private void HandleClickEvent()
+    {
+        Result = DateTime.Now.ToString("HH:MM:ss:fff");
+    }
+}
+````
+
+## Position and Alignment
+
+You can control how the Floating Action Button is positioned relative to its associated container. Read more about the [Blazor Floating Action Button positioning...](slug://fab-positions)
+
+## Events
+
+The Blazor Floating Action Button fires events that you can handle and respond to user actions. [Read more about the Blazor Floating Action Button events...](slug://fab-events).
+
+## Floating Action Button Parameters
+
+The Blazor Floating Action Button provides various parameters that allow you to configure the component. Also check the [Floating Action Button public API](slug:Telerik.Blazor.Components.TelerikFloatingActionButton).
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default&nbsp;Value | Description |
+| --- | --- | --- |
+| `Enabled` | `bool` <br /> (`true`) | Whether the Floating Action Button is enabled. |
+| `Id` | `string` | The `id` attribute of the Floating Action Button. |
+| `Icon` | `object` | The icon rendered in the Floating Action Button. Can be set to a predefined Telerik icon or a custom one. | 
+| `Title` | `string` | The `title` attribute of the Floating Action Button. |
+| `PositionMode` | `FloatingActionButtonPositionMode` enum <br /> (`Fixed`) | The position of the Floating Action Button relative to the container. |
+| `HorizontalAlign` | `FloatingActionButtonHorizontalAlign` <br /> (`End`) | Determines if the left or the right side of the Floating Action Button will touch its parent container. [Read more about Floating Action Button positioning.](slug://fab-positions) |
+| `VerticalAlign` | `FloatingActionButtonVerticalAlign` <br /> (`Bottom`) | Determines if the Floating Action Button will touch the parent container with its top or bottom side. |
+| `HorizontalOffset` | `string` <br /> (`16px`) | The horizontal offset value added to the button position, creating a blank space between the button and the parent. |
+| `VerticalOffset` | `string` <br /> (`16px`) | The vertical offset value added to the button position, creating a blank space between the button and the parent. |
+
+### Styling and Appearance
+
+The following parameters enable you to customize the appearance of the Blazor Floating Action Button:
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `Class` | `string` | Defines the custom CSS class rendered on `<button class="k-fab">`, which is the main wrapping element of the Floating Action Button component. Use it for [styling customizations](slug://themes-override). |
+| `Rounded` | `string` <br /> `"full"` | Defines how rounded the borders of the Floating Action Button are. Use predefined value constants from the static class `Telerik.Blazor.ThemeConstants.Button.Rounded`. |
+| `Size` | `string` <br /> (`"md"`) | Sets the size of the Floating Action Button. Set it to a predefined value constant from the static class `Telerik.Blazor.ThemeConstants.Button.Size`. |
+| `ThemeColor` | `string` <br /> (`"primary"`) | Adjusts the background color of the Floating Action Button. Use predefined values from the static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor`. |
+
+
+## Next Steps
+
+* [Explore the Floating Action Button Positioning and Alignment Settings](slug://fab-positions)
+* [Customize the Floating Action Button Appearance](slug://fab-appearance)
+
+## See Also
+
+* [Live Demo: Floating Action Button](https://demos.telerik.com/blazor-ui/floatingactionbutton/overview)
+* [Floating Action Button Events](slug://fab-events)
+* [Floating Action Button API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikFloatingActionButton)
\ No newline at end of file
diff --git a/components/floatingactionbutton/position-and-alignment.md b/components/floatingactionbutton/position-and-alignment.md
new file mode 100644
index 0000000000..0134bf0bba
--- /dev/null
+++ b/components/floatingactionbutton/position-and-alignment.md
@@ -0,0 +1,92 @@
+---
+title: Position
+page_title: Floating Action Button Position
+description: Explore the position and alignment settings of the Floating Action Button for Blazor.
+slug: fab-positions
+tags: telerik,blazor,floating action button,position,align,alignment
+published: True
+position: 2
+---
+
+# Position and Alignment
+
+You can position and align the Blazor Floating Action Button component relative to its parent container by using the available parameters. The example at the bottom of the page lets you experiment with the available parameters.
+
+## Position Mode
+
+The `PositionMode` parameter accepts a member of the `FloatingActionButtonPositionMode` enum and controls the CSS position of the Floating Action Button:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Enum member | Description |
+|---------------|--------|
+| `Fixed` <br /> (default) | Positions the button relative to the viewport. |
+| `Absolute` | Positions the button relative to the nearest positioned ancestor. |
+
+## Alignment
+
+Use the available alignment parameters to control which side of the Floating Action Button touches the parent element:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Enum Members |
+| ----------- | ----------- | ----------- |
+| `HorizontalAlign` | `FloatingActionButtonHorizontalAlign` | `End` (default) <br /> `Start` <br /> `Center` |
+| `VerticalAlign` | `FloatingActionButtonVerticalAlign` | `Bottom` (default) <br /> `Middle` <br /> `Top` |
+
+## Example
+
+````RAZOR
+<div class="custom-container">
+    <label>
+        Horizontal Alignment
+        <br />
+        <TelerikRadioGroup Data="@HorizontalAligns"
+                           @bind-Value="@HorizontalAlign">
+        </TelerikRadioGroup>
+    </label>
+    <label>
+        Vertical Alignment
+        <br />
+        <TelerikRadioGroup Data="@VerticalAligns"
+                           @bind-Value="@VerticalAlign">
+        </TelerikRadioGroup>
+    </label>
+</div>
+
+<TelerikFloatingActionButton HorizontalAlign="@HorizontalAlign"
+                             VerticalAlign="@VerticalAlign"
+                             Icon="SvgIcon.Pin" />
+
+<style>
+    .custom-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        column-gap: 10px;
+    }
+</style>
+
+@code {
+    private FloatingActionButtonHorizontalAlign HorizontalAlign { get; set; } = FloatingActionButtonHorizontalAlign.Start;
+    private List<FloatingActionButtonHorizontalAlign> HorizontalAligns { get; set; } = new List<FloatingActionButtonHorizontalAlign>()
+    {
+        FloatingActionButtonHorizontalAlign.Start,
+        FloatingActionButtonHorizontalAlign.Center,
+        FloatingActionButtonHorizontalAlign.End
+    };
+
+    private FloatingActionButtonVerticalAlign VerticalAlign { get; set; } = FloatingActionButtonVerticalAlign.Top;
+    private List<FloatingActionButtonVerticalAlign> VerticalAligns { get; set; } = new List<FloatingActionButtonVerticalAlign>()
+    {
+        FloatingActionButtonVerticalAlign.Top,
+        FloatingActionButtonVerticalAlign.Middle,
+        FloatingActionButtonVerticalAlign.Bottom
+    };
+}
+````
+
+## See Also
+
+* [Positioning - Design System Docs](https://www.telerik.com/design-system/docs/components/floatingactionbutton/#positioning)
\ No newline at end of file
diff --git a/docs-builder.yml b/docs-builder.yml
index ad0b3148a0..d9947fdbdf 100644
--- a/docs-builder.yml
+++ b/docs-builder.yml
@@ -149,6 +149,8 @@ meta:
     title: Gauges
   "*gantt":
     title: Gantt
+  "*floatingactionbutton":
+    title: Floating Action Button
   "*floatinglabel":
     title: FloatingLabel
   "*flatcolorpicker":
diff --git a/introduction.md b/introduction.md
index bd8eec326d..9c7378173c 100644
--- a/introduction.md
+++ b/introduction.md
@@ -78,6 +78,7 @@ You can watch a YouTube playlist of getting started tutorials for Blazor (videos
       <IntroTableAnchor title="Button" href="slug:components/button/overview"></IntroTableAnchor>
       <IntroTableAnchor title="Button Group" href="slug:buttongroup-overview"></IntroTableAnchor>
       <IntroTableAnchor title="Toggle Button" href="slug:togglebutton-overview"></IntroTableAnchor>
+      <IntroTableAnchor title="Floating Action Button" href="slug:fab-overview"></IntroTableAnchor>
       <IntroTableAnchor title="Drawer" href="slug:drawer-overview"></IntroTableAnchor>
       <IntroTableAnchor title="DropDownButton" href="slug:dropdownbutton-overview"></IntroTableAnchor>
       <IntroTableAnchor title="Menu" href="slug:components/menu/overview"></IntroTableAnchor>