FloatButton

Botón de acción flotante que permanece fijo en la página para acceso rápido a acciones comunes.

Importar

import { FloatButton } from 'asterui'

Ejemplos

Básico

Botón de acción flotante simple.

</>

+

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

Con Tooltip

Botón flotante con tooltip al pasar el ratón.

</>

+

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

Tipos

Tipos de botón predeterminado y primario.

</>

+♥

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

Formas

Formas de botón circulares y cuadradas.

</>

++

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

Con Badge

Botón flotante con insignia de notificación.

</>

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

Grupo de Botones Flotantes

Grupo de botones flotantes que se expanden al hacer clic.

</>

+?💬↻

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

Volver Arriba

Botón de desplazamiento hacia arriba que aparece después de desplazarse hacia abajo.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
icon	Icono a mostrar en el botón	React.ReactNode	-
description	Texto de descripción debajo del icono	React.ReactNode	-
type	Tipo/color del botón	'default' | 'primary'	'default'
shape	Forma del botón	'circle' | 'square'	'circle'
tooltip	Texto de tooltip al pasar el ratón	string	-
tooltipPlacement	Posición del tooltip	'left' | 'right' | 'top' | 'bottom'	'left'
badge	Contenido de la insignia a mostrar	number | React.ReactNode	-
href	URL del enlace (renderiza como ancla)	string	-
target	Target del enlace	string	-
onClick	Manejador de evento de clic	() => void	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

FloatButton.Group

Propiedad	Descripción	Tipo	Predeterminado
children	Componentes FloatButton a agrupar	React.ReactNode	-
flower	Organiza botones en diseño de cuarto de círculo (radial)	boolean	false
shape	Forma del botón para los hijos	'circle' | 'square'	'circle'
icon	Icono del botón activador principal	React.ReactNode	-
mainAction	Icono del botón de acción principal (reemplaza activador cuando está abierto)	React.ReactNode	-
onMainAction	Manejador de clic para el botón de acción principal	() => void	-
showClose	Mostrar botón de cierre cuando está abierto	boolean	false
type	Tipo/color del botón	'default' | 'primary'	'default'
position	Posición en pantalla	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'
offset	Distancia desde el borde en píxeles	number	24
data-testid	ID de prueba para pruebas	string	-

FloatButton.BackTop

Propiedad	Descripción	Tipo	Predeterminado
visibilityHeight	Distancia de desplazamiento antes de que aparezca el botón (píxeles)	number	400
target	Elemento objetivo de desplazamiento	() => HTMLElement | Window	-
onClick	Manejador de evento de clic (llamado antes de desplazarse)	() => void	-
icon	Icono personalizado	React.ReactNode	-
duration	Duración de la animación de desplazamiento en ms	number	450
position	Posición en pantalla	'bottom-right' | 'bottom-left'	'bottom-right'
offset	Distancia desde el borde en píxeles	number	24
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa elemento <button> nativo para soporte de teclado adecuado
• Soporta prop href para renderizar como ancla para funcionalidad de enlace
• Los tooltips proporcionan contexto para lectores de pantalla cuando están presentes
• Los estados de enfoque son claramente visibles para navegación por teclado
• La expansión del grupo es accesible por teclado
• El botón BackTop aparece/desaparece según la posición de desplazamiento