Todos los componentes (204)

Botón flotante

Acciones · FloatingButton

Qué es y cuándo usarlo

Una acción suelta que se queda flotando sobre la página, fija en una esquina: añadir un producto, un pedido nuevo, abrir el carrito. Redondo si solo lleva icono; de píldora si lleva text. Entra creciendo desde su esquina. FloatingGroup apila varios en la misma esquina y es él quien los coloca.

Cuándo usarlo

La acción que tiene que estar a mano en toda la pantalla, sobre todo en móvil: «Nuevo pedido», «Añadir producto».
corner elige la esquina: end-bottom (por defecto), start-bottom, end-top o start-top; inicio y fin siguen el sentido del idioma.
Dos o tres en la misma esquina, dentro de un FloatingGroup, para que no se pisen.

Cuándo no

Para subir al principio de la página: BackToTop, que aparece solo al bajar y se lleva el foco.
Una acción que es de un bloque concreto va en ese bloque: Button.

Teclado: es un botón normal: Tab llega a él, Intro y Espacio lo pulsan. Se queda en el sitio del DOM donde se pone (no se lleva a otro lado): ponlo al final, que es donde el teclado espera encontrarlo. Uno fijo al principio del contenido obliga a pasar por él en cada pantalla.

Accesibilidad: el nombre o se ve o se dice: con text no admite label (los tipos no lo dejan), porque un aria-label distinto del texto visible rompe el control por voz; sin texto, label es obligatoria. El tamaño normal ya mide 44 px, el objetivo táctil (40, 44 o 56 px según size). No hay variante ghost: sin fondo, sobre el contenido no se vería. Al imprimir no sale.

Aspecto fino: redefine sobre .amset-button-floating las variables de Button: --amset-button-height, --amset-button-radius, --amset-button-icon, --amset-button-padding y --amset-button-weight. El grupo es amset-floating-group.

En esta ficha cada historia va en su propio marco: el botón se queda en la esquina de ese marco.

Cómo se ve

El botón va fijo en la esquina de la pantalla; aquí, en la de esta caja.

<FloatingButton
  icon={<MoreIcon />}
  text="Nuevo pedido"
  corner="end-bottom"
  onPress={crearPedido}
/>

Props

Se importa con import { FloatingButton } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`icon`obligatoria	`ReactNode`	—
`className`	`string`	—
`corner`	`FloatingCorner`	—
`disabled`	`boolean`	Fuera de juego: ni se pulsa, ni se enfoca, ni entra en la tabulacion.
`excludeFromTabOrder`	`boolean`	Fuera de la tabulacion pero pulsable. Para un boton que duplica algo que ya esta en ella: el de abrir la lista de un buscador, que no hace nada que no haga la flecha de abajo.
`label`	`string`	—
`loading`	`boolean`	Estado de envio. El boton sigue enfocable (`aria-disabled`), deja de responder a la pulsacion y anuncia el cambio al lector de pantalla. No cambia de ancho: el girador se pone encima del texto, no al lado.
`loadingLabel`	`string`	Lo que se anuncia mientras dura el envio.
`loadingText`	`string`	El texto que sale EN LUGAR del contenido mientras dura el envio: «Guardando…». Sin girador encima: el texto es el aviso, y se anuncia al cambiar. Es lo que hacia un front que cambiaba sus `children` a mano. El boton cambia de ancho si el texto nuevo mide otra cosa.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—
`onPress`	`PressHandler`	—
`shape`	`"default" \| "pill"`	La forma: `default` (por defecto) o `pill`, con las esquinas del todo redondeadas. Dentro de un `ButtonGroup` solo quedan redondeadas las esquinas de fuera del grupo. Para el boton redondo de solo icono, `IconButton`.
`size`	`"sm" \| "md" \| "lg"`	40, 44 o 56 px: nunca por debajo del objetivo tactil en el tamaño normal.
`style`	`CSSProperties`	Estilo en linea. El aspecto estable va en las variables CSS `--amset-button-*`, que es lo que se mantiene; esto es para lo que solo se sabe en tiempo de ejecucion: un color que elige quien usa la aplicacion, una posicion calculada, un alto que depende del contenido. Estuvo prohibido y hubo que abrirlo: un front real lo usaba en 40 botones para calcular su halo a partir de un color arbitrario (AMS-735), y sin esto la unica salida era escribir CSS a mano contra nuestras clases.
`text`	`string`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline"`	Flota sobre el contenido: sin fondo no se veria, asi que no hay fantasma.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: