FloatButton

Floating action button that stays fixed on the page for quick access to common actions.

Import

import { FloatButton } from 'asterui'

Examples

Basic

Simple floating action button.

</>

+

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          onClick={() => alert('Button clicked!')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

With Tooltip

Float button with tooltip on hover.

</>

+

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          tooltip="Add new item"
          type="primary"
          onClick={() => alert('Add clicked!')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Types

Default and primary button types.

</>

+♥

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          type="default"
          className="!absolute !right-20 !bottom-4"
        />
        <FloatButton
          icon={<span className="text-lg">♥</span>}
          type="primary"
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Shapes

Circle and square button shapes.

</>

++

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          shape="circle"
          className="!absolute !right-20 !bottom-4"
        />
        <FloatButton
          icon={<span className="text-lg">+</span>}
          shape="square"
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

With Badge

Float button with notification badge.

</>

5💬

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">💬</span>}
          badge={5}
          onClick={() => alert('You have 5 unread messages')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Float Button Group

Group of float buttons that expand on click.

</>

+?💬↻

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-48 bg-base-200 rounded-lg">
        <FloatButton.Group
          icon={<span className="text-lg">+</span>}
          className="!absolute !right-4 !bottom-4"
        >
          <FloatButton
            icon={<span>?</span>}
            onClick={() => alert('Help section')}
          />
          <FloatButton
            icon={<span>💬</span>}
            onClick={() => alert('Contact support')}
          />
          <FloatButton
            icon={<span>↻</span>}
            onClick={() => alert('Refreshing...')}
          />
        </FloatButton.Group>
      </div>
    )
}

export default App

Back to Top

Scroll to top button that appears after scrolling down.

</>

BackTop button appears after scrolling down 400px

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg flex items-center justify-center text-base-content/60">
        <p>BackTop button appears after scrolling down 400px</p>
      </div>
    )
}

export default App

API

FloatButton

Property	Description	Type	Default
icon	Icon to display in the button	React.ReactNode	-
description	Description text below icon	React.ReactNode	-
type	Button type/color	'default' | 'primary'	'default'
shape	Button shape	'circle' | 'square'	'circle'
tooltip	Tooltip text on hover	string	-
tooltipPlacement	Tooltip position	'left' | 'right' | 'top' | 'bottom'	'left'
badge	Badge content to show	number | React.ReactNode	-
href	Link URL (renders as anchor)	string	-
target	Link target	string	-
onClick	Click event handler	() => void	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

FloatButton.Group

Property	Description	Type	Default
children	FloatButton components to group	React.ReactNode	-
flower	Arrange buttons in quarter-circle (radial) layout	boolean	false
shape	Button shape for children	'circle' | 'square'	'circle'
icon	Main trigger button icon	React.ReactNode	-
mainAction	Main action button icon (replaces trigger when open)	React.ReactNode	-
onMainAction	Click handler for main action button	() => void	-
showClose	Show close button when open	boolean	false
type	Button type/color	'default' | 'primary'	'default'
position	Position on screen	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'
offset	Distance from edge in pixels	number	24
data-testid	Test ID for testing	string	-

FloatButton.BackTop

Property	Description	Type	Default
visibilityHeight	Scroll distance before button appears (pixels)	number	400
target	Scroll target element	() => HTMLElement | Window	-
onClick	Click event handler (called before scrolling)	() => void	-
icon	Custom icon	React.ReactNode	-
duration	Scroll animation duration in ms	number	450
position	Position on screen	'bottom-right' | 'bottom-left'	'bottom-right'
offset	Distance from edge in pixels	number	24
data-testid	Test ID for testing	string	-

Accessibility

• Uses native <button> element for proper keyboard support
• Supports href prop to render as anchor for link functionality
• Tooltips provide context for screen readers when present
• Focus states are clearly visible for keyboard navigation
• Group expansion is keyboard accessible
• BackTop button appears/disappears based on scroll position