Todos los componentes (204)

Botón de cargar más

Acciones · LoadMoreButton

Qué es y cuándo usarlo

El «Cargar más» de una lista paginada, con el recuento debajo («40 de 120 pedidos», con los números del idioma: «12.000 de 34.000»). Lo que aporta no es el botón: es que el resultado se anuncia. Al pulsar, el foco se queda en el botón y las filas nuevas salen por debajo; sin anuncio, quien no las ve no se entera de nada.

Cuándo usarlo

Listas y rejillas en las que se sigue bajando: el catálogo, el historial de pedidos, las fotos de una galería.
loaded es cuántos van y name lo que se cuenta («pedidos»); text cambia el texto del botón.
Sin total si no se sabe cuántos hay: se ofrece siempre y el recuento dice solo cuántos van.
onLoad puede devolver una promesa: el botón espera, con el girador, hasta que se resuelve.

Cuándo no

Cuando hay que saltar a una página concreta o volver a ella: Pagination.
Miles de filas que ya están en el cliente: VirtualList.

Teclado: Tab llega al botón; Intro y Espacio cargan. Mientras carga sigue enfocable, pero no responde otra vez.

Accesibilidad: al terminar de cargar se anuncia el recuento nuevo en una región de estado. Si falla, se dice («No se han podido cargar más. Inténtalo otra vez.»), el botón pasa a «Reintentar» y el error va a onError (o a la consola, si no se pasa). Al llegar a total el botón se va y queda endText, si se da. Si el botón tenía el foco, este no se cae al body: pasa al primer elemento nuevo de list (la ul, el tbody o la rejilla, con un elemento por hijo directo) o, sin ella, al texto final o al recuento.

Aspecto fino: sin variables propias: se ajusta con las clases amset-load, amset-load__count y amset-load__end. El botón es un Button (con variant, tone y size) y admite las --amset-button-*.

Cómo se ve

Pedido 1040
Pedido 1041
Pedido 1042
Pedido 1043
Pedido 1044

5 de 20 pedidos

<LoadMoreButton
  loaded={pedidos.length}
  total={20}
  name="pedidos"
  endText="No hay mas pedidos"
  list={listaRef}
  onLoad={cargarOtros}
/>

Props

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

Prop	Tipo	Para qué sirve
`loaded`obligatoria	`number`	—
`onLoad`obligatoria	`() => void \| Promise<void>`	Trae el siguiente trozo. Si devuelve una promesa, el boton espera.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`endText`	`string`	Texto cuando ya no queda nada. Sin esto, no se pinta nada.
`list`	`RefObject<HTMLElement \| null>`	La lista que se va alargando, con un elemento por hijo directo (la `ul`, el `tbody`, la rejilla). Al traer la ultima pagina el boton se va, y el foco, si lo tenia, pasa al primer elemento nuevo. Sin esto pasa al `endText` o, si no lo hay, al recuento: nunca se cae al `body`.
`name`	`string`	Como se llaman las cosas que se cargan: «resultados», «pedidos», «fotos».
`onError`	`(error: unknown) => void`	Lo que se hace con el error si la carga falla, ademas de decirlo en pantalla: mandarlo al registro de la aplicacion. Sin esto va a la consola, que un fallo que no deja rastro no se arregla nunca.
`size`	`"sm" \| "md" \| "lg"`	—
`text`	`string`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`total`	`number`	Cuantos hay en total. Sin esto, el boton no sabe cuando parar.
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	—

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: