FloatButton

Botão de ação flutuante que permanece fixo na página para acesso rápido a ações comuns.

Importação

import { FloatButton } from 'asterui'

Exemplos

Básico

Botão de ação flutuante simples.

</>

+

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

Com Tooltip

Botão flutuante com tooltip ao passar o mouse.

</>

+

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ão padrão e primário.

</>

+♥

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ão círculo e quadrado.

</>

++

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

Com Badge

Botão flutuante com badge de notificação.

</>

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 FloatButton

Grupo de botões flutuantes que expandem ao clicar.

</>

+?💬↻

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

Voltar ao Topo

Botão de rolar para o topo que aparece após rolar para baixo.

</>

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

Propriedade	Descrição	Tipo	Padrão
icon	Ícone para exibir no botão	React.ReactNode	-
description	Texto de descrição abaixo do ícone	React.ReactNode	-
type	Tipo/cor do botão	'default' | 'primary'	'default'
shape	Forma do botão	'circle' | 'square'	'circle'
tooltip	Texto do tooltip ao passar o mouse	string	-
tooltipPlacement	Posição do tooltip	'left' | 'right' | 'top' | 'bottom'	'left'
badge	Conteúdo do badge a mostrar	number | React.ReactNode	-
href	URL do link (renderiza como âncora)	string	-
target	Alvo do link	string	-
onClick	Manipulador de evento de clique	() => void	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

FloatButton.Group

Propriedade	Descrição	Tipo	Padrão
children	Componentes FloatButton para agrupar	React.ReactNode	-
flower	Organizar botões em layout de quarto de círculo (radial)	boolean	false
shape	Forma do botão para filhos	'circle' | 'square'	'circle'
icon	Ícone do botão acionador principal	React.ReactNode	-
mainAction	Ícone do botão de ação principal (substitui acionador quando aberto)	React.ReactNode	-
onMainAction	Manipulador de clique para botão de ação principal	() => void	-
showClose	Mostrar botão de fechar quando aberto	boolean	false
type	Tipo/cor do botão	'default' | 'primary'	'default'
position	Posição na tela	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'
offset	Distância da borda em pixels	number	24
data-testid	ID de teste para testes	string	-

FloatButton.BackTop

Propriedade	Descrição	Tipo	Padrão
visibilityHeight	Distância de rolagem antes do botão aparecer (pixels)	number	400
target	Elemento alvo de rolagem	() => HTMLElement | Window	-
onClick	Manipulador de evento de clique (chamado antes de rolar)	() => void	-
icon	Ícone personalizado	React.ReactNode	-
duration	Duração da animação de rolagem em ms	number	450
position	Posição na tela	'bottom-right' | 'bottom-left'	'bottom-right'
offset	Distância da borda em pixels	number	24
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa elemento <button> nativo para suporte adequado de teclado
• Suporta prop href para renderizar como âncora para funcionalidade de link
• Tooltips fornecem contexto para leitores de tela quando presentes
• Estados de foco são claramente visíveis para navegação por teclado
• Expansão do grupo é acessível via teclado
• Botão BackTop aparece/desaparece com base na posição de rolagem