Completed
Last Updated: 16 Apr 2025 07:49 by ADMIN
Jack
Created on: 15 Apr 2025 14:29
Category: UI for Blazor
Type: Feature Request
3
Request for a Floating Split Action Button in Telerik UI for Blazor
Currently, Telerik UI for Blazor offers two components that address different interface needs: the SplitButton, which provides a primary action with a dropdown of secondary actions, and the FloatingActionButton, which enables a floating UI element for a single prominent action. While both serve their roles well, there is no built-in option that combines the floating behavior of the FAB with the dropdown structure of the SplitButton. This leaves a gap in scenarios where a floating control with both a primary and expandable set of actions is needed, especially in mobile-first designs. While it’s technically possible to mimic this with CSS, the result is less reliable and lacks the flexibility and structure of a native solution. A combined FloatingSplitButton component would allow developers to build consistent, responsive interfaces that benefit from built-in theming, safe area awareness, and popup templates without complex workarounds.
1 comment
ADMIN
Dimo
Posted on: 16 Apr 2025 07:49

Hello Jack,

We reviewed this request and have the following considerations:

  • The FloatingActionButton follows the Material Design language, where there is no concept for a floating split button. There is a concept for a "Speed Dial", which is already possible to achieve, as per our Floating Action Button online demo.
  • Floating buttons are used mainly on touch devices where touch precision is not a given. On the other hand, a SplitButton requires precision to click either the primary action, or the dropdown arrow. This makes the component less suitable for mobile-first UI.

If you still want to use a floating SplitButton and not a FloatingActionButton with a Speed Dial, then use CSS positioning:

https://blazorrepl.telerik.com/GTayvUOh44WIM5eH02

<TelerikSplitButton Icon="@SvgIcon.Plus"
                    Rounded="@ThemeConstants.SplitButton.Rounded.Full"
                    Size="@ThemeConstants.SplitButton.Size.Large"
                    ThemeColor="@ThemeConstants.SplitButton.ThemeColor.Primary"
                    Class="floating-split-button">
    <SplitButtonContent>Primary</SplitButtonContent>
    <SplitButtonItems>
        <SplitButtonItem>Secondary 1</SplitButtonItem>
        <SplitButtonItem>Secondary 2</SplitButtonItem>
        <SplitButtonItem>Secondary 3</SplitButtonItem>
    </SplitButtonItems>
</TelerikSplitButton>

<style>
    .floating-split-button {
        position: fixed;
        bottom: 2em;
        right: 2em;
    }
</style>

<div style="height: 200vh; background-image: linear-gradient(gray, white, gray);"></div>

 

Regards,
Dimo
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!