Floating Button
A prominent action button that floats above the interface, representing the primary screen action regardless of scroll position.
<div className="relative w-full max-w-[400px] rounded-xl border ..."> {/* Inbox message rows */} <div className="absolute bottom-4 end-4"> <FloatingButton variant="primary" size="md" leadingIcon={<PencilIcon />}> ComposeInstallation
npx sdaia-ui@latest add floatingbutton
Usage
import { FloatingButton } from 'component/ui';\n<FloatingButton icon="plus" aria-label="Create" /><FloatingButton variant="primary" leadingIcon={<PlusIcon />}>{isRtl ? 'إنشاء' : 'Create'}</FloatingButton>Examples
Primary
Floating action button in the primary style.
<FloatingButton variant="primary"/>Secondary Solid
Floating action button in the secondary solid style.
<FloatingButton variant="secondary-solid"/>Neutral
Floating action button in the neutral style.
<FloatingButton variant="neutral"/>Icon Only
Floating button showing only an icon, without a label.
<FloatingButton iconOnly={true}/>With Label
Floating button with an accompanying text label.
<FloatingButton variant="primary" leadingIcon={<PlusIcon />}> Create</FloatingButton>Sizes
Floating button available in Large, Medium, and Small sizes.
<div className="flex flex-wrap items-center gap-spacing-lg"> <FloatingButton variant="primary" size="sm" leadingIcon={<PlusIcon />}>Button</FloatingButton> <FloatingButton variant="primary" size="md" leadingIcon={<PlusIcon />}>Button</FloatingButton> <FloatingButton variant="primary" size="lg" leadingIcon={<PlusIcon />}>Button</FloatingButton></div>Disabled
Floating button in the disabled state, preventing interaction.
<FloatingButton variant="primary" disabled leadingIcon={<PlusIcon />}> Create</FloatingButton>API Reference
Floating Button Props
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 |