Skip to main content

FloatingButton

orbital_core_components::floating_button

Function FloatingButton 

Source 
pub fn FloatingButton(props: FloatingButtonProps) -> impl IntoView
Expand description

Elevated floating control for the single most important action on a screen.

Rounded-square icon-only by default with elevated surface styling. Pin to a viewport corner with FloatingButtonConfig::fixed. Set config.variant to [FloatingButtonVariant::Circular] for a full circle, or [FloatingButtonVariant::Extended] for icon plus label with the same rounded-square corners.

§When to use

  • One primary action that should stay visible above page content - Back-to-top and similar floating affordances built on the same base

§Usage

  1. Provide an icon or extended label via children. 2. Set aria_label for icon-only buttons. 3. Use config.fixed(right, bottom) when the button should float on the viewport.

§Best Practices

§Do’s

  • Use one floating primary action per screen for the most important command * Provide a descriptive aria_label when no visible text is shown

§Don’ts

  • Do not use floating buttons for secondary or destructive actions without clear labeling

§Examples

§Default

Rounded-square icon-only floating button with primary emphasis.

use crate::FloatingButton;
view! {
    <div data-testid="floating-button-preview">
        <FloatingButton aria_label="Add".to_string() icon=icondata::AiPlusOutlined />
    </div>
}

§Extended

Extended variant includes a visible text label beside the icon.

use crate::{FloatingButton, FloatingButtonConfig, FloatingButtonVariant};
use leptos::prelude::*;
view! {
    <div data-testid="floating-button-extended">
        <FloatingButton
            config=FloatingButtonConfig { variant: FloatingButtonVariant::Extended.into(), ..Default::default() }
            aria_label="Navigate".to_string()
            icon=icondata::AiCompassOutlined
        >
            "Navigate"
        </FloatingButton>
    </div>
}

§Size

Compare small, medium, and large icon-only sizes.

use crate::{FloatingButton, FloatingButtonConfig, FloatingButtonSize, Stack, StackConfig, FlexGap};
use leptos::prelude::*;
view! {
    <div data-testid="floating-button-size">
        <Stack config=StackConfig::horizontal(FlexGap::Medium)>
            <FloatingButton
                config=FloatingButtonConfig { size: FloatingButtonSize::Small.into(), ..Default::default() }
                aria_label="Add small".to_string()
                icon=icondata::AiPlusOutlined
            />
            <FloatingButton
                config=FloatingButtonConfig { size: FloatingButtonSize::Medium.into(), ..Default::default() }
                aria_label="Add medium".to_string()
                icon=icondata::AiPlusOutlined
            />
            <FloatingButton aria_label="Add large".to_string() icon=icondata::AiPlusOutlined />
        </Stack>
    </div>
}

§Secondary color

Secondary treatment for less prominent floating actions.

use crate::{FloatingButton, FloatingButtonColor, FloatingButtonConfig};
use leptos::prelude::*;
view! {
    <div data-testid="floating-button-secondary">
        <FloatingButton
            config=FloatingButtonConfig { color: FloatingButtonColor::Secondary.into(), ..Default::default() }
            aria_label="Edit".to_string()
            icon=icondata::AiEditOutlined
        />
    </div>
}

§Required Props

§Optional Props