Todos los componentes (204)

Impresión

Más · Printable

Qué es y cuándo usarlo

Tres piezas para que una factura, un albarán o un presupuesto salgan bien en papel. Printable envuelve la parte que tiene que salir entera; NoPrint, lo que no va al papel (botones, filtros, el chat de soporte); PrintOnly, lo que solo existe en papel (el pie con los datos fiscales, «página 1 de 3», la nota legal). En pantalla, NoPrint no cambia nada.

Cuándo usarlo

En las pantallas que la gente imprime o guarda en PDF desde el navegador: facturas, pedidos, presupuestos.
inline en NoPrint o PrintOnly para usarlos dentro de un párrafo: un span en vez de un div.

Cuándo no

Para generar un PDF en el servidor: esto solo ordena lo que imprime el navegador.
Para ocultar algo a la vista pero no al lector de pantalla: la clase amset-hidden-visual.

Teclado: no tiene, no son interactivos.

Accesibilidad: PrintOnly está oculto de verdad en pantalla (display: none), también para el lector de pantalla: un pie de página legal no le sirve a nadie mirando la web.

Al imprimir: en toda la página se van las sombras de la librería y lo que solo sirve en pantalla (barras fijas, avisos y botones flotantes, esqueletos de carga, diálogos y paneles abiertos), las tablas de la librería repiten la cabecera en cada hoja y ni una fila ni una tarjeta se parte en dos. Dentro de Printable, además, las tablas y listas con desplazamiento de la librería se abren enteras y los enlaces externos (los que empiezan por http) llevan su dirección escrita al lado; links={false} lo quita. En papel sale siempre el tema claro. Pruébalo con el botón de la historia o con la vista previa de impresión del navegador.

Aspecto fino: sin variables propias: se ajusta con las clases amset-printable, amset-print-hidden y amset-print-only, dentro de @media print.

Cómo se ve

Joyería Aurelia S.L. · B-12345678 · Calle Mayor 12, 28013 Madrid

Factura F-2026-0142 · 14 de octubre de 2026 · Lucía Martín

Anillo Aurelia de plata 925: 89,00 €
Collar Lúa de oro de 18 quilates: 420,00 €

Total: 509,00 € (IVA incluido)

<Printable>
  <PrintOnly>Joyeria Aurelia S.L. · B-12345678</PrintOnly>
  <Factura />
  <NoPrint>
    <Button variant="solid" onPress={() => window.print()}>Imprimir la factura</Button>
  </NoPrint>
</Printable>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`links`	`boolean`	Escribe la direccion detras de cada enlace externo. En papel un «pincha aqui» no lleva a ningun sitio.

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: