Component

FloatButton

Floating action button (FAB) for primary actions. Stays fixed on screen.

tsx

import { FloatButton, FloatButtonGroup, BackToTop } from 'wss3-forge'

Usage

•

Use for primary actions like "Add" or "Compose"

•

FloatButtonGroup for multiple related actions

•

BackToTop for long scrollable pages

•

Position in bottom-right by default

Primary

Secondary

Gradient

Examples

Basic FloatButton

By default, FloatButton is inline. Use inline=false for fixed positioning.

tsx

1<FloatButton
2  icon={<Add20Regular />}
3  onClick={() => console.log('Add clicked')}
4/>

Variants

Primary

Secondary

Gradient

tsx

1<FloatButton variant="primary" icon={<Add20Regular />} />
2<FloatButton variant="secondary" icon={<Edit20Regular />} />
3<FloatButton variant="gradient" icon={<Rocket20Regular />} />

Sizes

Small

Medium

Large

tsx

1<FloatButton size="sm" icon={<Add20Regular />} />
2<FloatButton size="md" icon={<Add20Regular />} />
3<FloatButton size="lg" icon={<Add20Regular />} />

Fixed Position Usage

Set inline=false to fix the button to a screen corner

tsx

1// Use inline={false} for fixed positioning
2<FloatButton
3  icon={<Add20Regular />}
4  tooltip="Create new item"
5  inline={false}
6  position="bottom-right"
7  onClick={() => setShowModal(true)}
8/>

Button

GradientButton

Last updated: December 2025