Todos los componentes (204)

Botón de compartir

Acciones · ShareButton

Qué es y cuándo usarlo

Compartir una página: un producto, una lista de deseos, un pedido. Al pulsar, si el navegador trae su propio menú de compartir (navigator.share: móviles y Safari), se usa ese, que es el que conoce las aplicaciones instaladas. Si no, se abre un panel con «Copiar el enlace» y las redes de siempre.

Cuándo usarlo

En la ficha de un producto o de un contenido que la gente manda a otros.
title y url son lo que se comparte; label es el texto del botón («Compartir» por defecto).
networks para quedarse con las que tienen sentido (whatsapp, telegram, x, email): una tienda de barrio quizá solo quiere WhatsApp y correo.
text para el mensaje que acompaña al enlace; sin él, va el title.

Cuándo no

Copiar un dato suelto (un código, un IBAN): Copyable.
Un enlace fijo a una red concreta: ButtonLink.

Teclado: Tab llega al botón; Intro o Espacio lo pulsan. El panel es un <dialog> junto al botón que deja inerte el resto de la página mientras está abierto: el foco entra al abrirlo, Tab recorre las opciones y Escape lo cierra y devuelve el foco al botón.

Accesibilidad: el panel se anuncia como «Compartir «título»». Cada red es un enlace que avisa de que se abre en otra pestaña («WhatsApp (se abre en otra pestaña)»). «Copiar el enlace» cierra el panel y lo dice en una región de estado («Enlace copiado»), que se vacía al rato para que copiar otra vez se vuelva a oír. Si no se puede copiar, el panel sigue abierto y se dice desde dentro de él: con el panel abierto, el resto de la página queda oculto al lector. Cerrar el menú del sistema no se trata como un fallo: es cambiar de idea. Un fallo de verdad (del menú del sistema, que deja paso al panel, o del portapapeles) va a onError, o a la consola si no se pasa.

Aspecto fino: sin variables propias. El botón es un Button (outline por defecto, con variant, tone y size) y admite las --amset-button-*; el panel se ajusta con las clases amset-share y amset-share__option. className va al panel, no al botón.

Si tu navegador tiene menú de compartir propio, en esta ficha verás ese y no el panel.

Cómo se ve

<ShareButton
  title="Anillo Aurelia de plata"
  url="https://tienda.ejemplo.es/anillos/aurelia-plata"
  text="Mira este anillo de plata de la joyeria Aurelia"
/>
<ShareButton title="Mi lista de deseos" url={enlace} label="Compartir la lista" networks={['whatsapp', 'telegram']} />

Props

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

Prop	Tipo	Para qué sirve
`title`obligatoria	`string`	—
`url`obligatoria	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`label`	`string`	—
`networks`	`readonly ShareNetwork[]`	—
`onError`	`(error: unknown) => void`	Lo que se hace con un fallo de verdad (el menu del sistema que no se abre, el portapapeles sin permiso), ademas de abrir el panel o decirlo: mandarlo al registro de la aplicacion. Sin esto va a la consola. Cancelar el menu del sistema no es un fallo y no llega aqui.
`size`	`"sm" \| "md" \| "lg"`	—
`text`	`string`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`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: