Skip to content
EspañolEnglish
All components (204)

Printing

More · Printable

What it is and when to use it

Three pieces so that an invoice, a delivery note or a quote come out well on paper. Printable wraps the part that has to come out whole; NoPrint, what does not go on paper (buttons, filters, the support chat); PrintOnly, what exists only on paper (the footer with tax details, "page 1 of 3", the legal note). On screen, NoPrint changes nothing.

When to use it

  • On screens that people print or save as PDF from the browser: invoices, orders, quotes.
  • inline on NoPrint or PrintOnly to use them inside a paragraph: a span instead of a div.

When not to

  • To generate a PDF on the server: this only arranges what the browser prints.
  • To hide something from view but not from the screen reader: the amset-hidden-visual class.

Keyboard: it has none, they are not interactive.

Accessibility: PrintOnly is truly hidden on screen (display: none), also from the screen reader: a legal footer is of no use to anyone looking at the web.

When printing: across the whole page, the library's shadows go away along with what is only useful on screen (fixed bars, floating alerts and buttons, loading skeletons, open dialogs and panels), the library's tables repeat the header on every sheet and no row or card is split in two. Inside Printable, in addition, the library's scrolling tables and lists open up completely and external links (those starting with http) have their address written next to them; links={false} removes it. On paper the light theme is always used. Try it with the button in the story or with the browser's print preview.

Fine-tuning: no variables of its own: it is adjusted with the classes amset-printable, amset-print-hidden and amset-print-only, inside @media print.

What it looks like

Aurelia Jewelry S.L. · B-12345678 · Calle Mayor 12, 28013 Madrid

Invoice F-2026-0142 · October 14, 2026 · Lucía Martín

  • Aurelia sterling silver ring: €89.00
  • Lúa 18-karat gold necklace: €420.00

Total: €509.00 (VAT included)

<Printable>
  <PrintOnly>Aurelia Jewelry S.L. · B-12345678</PrintOnly>
  <Factura />
  <NoPrint>
    <Button variant="solid" onPress={() => window.print()}>Print the invoice</Button>
  </NoPrint>
</Printable>

Props

Import it with import { Printable } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNode—
classNamestringMerged with the library classes; it does not replace them.
linksbooleanWrites the address after each external link. On paper a "click here" leads nowhere.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: