Vanilla Breeze

print-page

A print button with optional toggle to disable VB print style optimizations.

Overview

The <print-page> component wraps window.print() in a progressive enhancement button with a printer icon. It auto-hides itself when printing and optionally lets users toggle VB’s print style optimizations on or off.

By default the button shows both a printer icon and label text. Without JavaScript, the element renders as inert text. With JavaScript, it becomes a functional print button.

Attributes

Attribute Type Default Description
raw-toggle Boolean — If present, shows a checkbox labeled “Print without VB styles”
label String Element text or “Print this page” Custom button label
variant icon, label, icon-label icon Visual display mode. Use icon-label for a labeled button, label for text only.

Variants

Control the visual display with the variant attribute.

In Page Tools

Use variant="icon" when placing inside <page-tools> for a compact toolbar appearance.

Raw Mode Toggle

When raw-toggle is present, the component adds a checkbox. If checked, it sets data-print-raw on the <html> element before opening the print dialog, which disables all VB print optimizations. The attribute is removed after printing.

This is useful for users who want to see the page print exactly as it appears on screen — with theme colors, shadows, and layout intact.

Custom Label

Set the button text via label or as the element’s text content.

Usage in Context

Place the component wherever makes sense. It hides itself during printing automatically. Adding data-no-print is redundant but makes intent explicit.

Demo

Try the print buttons below.

Print this page Print with options

Full-page demos: Article, Invoice, Report

Accessibility

  • The component renders a native <button> — fully keyboard accessible.
  • The raw-mode toggle uses a native <input type="checkbox"> inside a <label>.
  • The component sets role="group" on itself when both button and toggle are present.

Related
↑