A prominent action button that floats above the interface, representing the primary screen action regardless of scroll position.
Loading demo: floating-button-real-world
npx sdaia-ui@latest add floatingbutton
import { FloatingButton } from 'component/ui';\n<FloatingButton icon="plus" aria-label="Create" /><FloatingButton variant="primary" leadingIcon={<PlusIcon />}>{isRtl ? 'إنشاء' : 'Create'}</FloatingButton>Use surface="glass" to enable Glass Effect
Loading demo: floating-button-glass
Floating action button in the primary style.
Loading demo: floating-button-primary
Floating action button in the secondary solid style.
Loading demo: floating-button-secondary-solid
Floating action button in the neutral style.
Loading demo: floating-button-neutral
Floating button showing only an icon, without a label.
Loading demo: floating-button-icon-only
Floating button with an accompanying text label.
Loading demo: floating-button-with-label
Floating button available in Large, Medium, and Small sizes.
Loading demo: floating-button-sizes
Floating button in the disabled state, preventing interaction.
Loading demo: floating-button-disabled
Props for the Floating Button component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'neutral' | 'primary' | 'secondary-solid' | — | optional |
size | 'sm' | 'md' | 'lg' | — | optional |
leadingIcon | ReactNode | — | optional |
trailingIcon | ReactNode | — | optional |
iconOnly | boolean | — | optional |
disabled | boolean | — | optional |
selected | boolean | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
as | ElementType | — | optional |
children | ReactNode | — | optional |