Watermark

Tiles a rotated text (and optional second line) watermark over its content. Decorative overlay: aria-hidden and pointer-events none, so content stays readable and interactive.

Import

import { Watermark } from '@marbleui/ui'

Props

<Watermark>

Prop	Type	Default
children *required	`ReactNode`	`—`
text *required	`string`	`—`
className	`string`	`—`
gap	`number`	`140`
opacity	`number`	`0.12`
rotate	`number`	`-22`
subtext	`string`	`—`

Usage notes

Repeats a rotated text mark, with an optional second line, over its children: drafts, confidential documents, previews that name the viewer. It’s a visual deterrent only; the content underneath can still be selected and copied.

<Watermark text="CONFIDENTIAL" subtext="maya@acme.com · Oct 20" className="rounded-xl border border-border bg-surface p-6">
  <BoardMemo />
</Watermark>

The overlay is aria-hidden and ignores the pointer, so content reads and works as normal. Screen readers never hear the mark; state anything important, such as “Draft”, in visible text too.
opacity (default 0.12), rotate in degrees (default −22) and gap (tile height in pixels, default 140) tune the pattern. Tiles are gap × 1.6 px wide, so raise gap for long text or it gets cut off.
The mark uses the fg color, so it follows the theme. Font sizes are fixed (15 px, 11 px for subtext).

Example source · show

import { Watermark } from './watermark'

export const styles = {
  Document: () => <Watermark text="CONFIDENTIAL" subtext="maya@acme.com · Oct 20" className="w-96 rounded-xl border border-border bg-surface p-6"><h3 className="font-semibold text-fg">Q4 board memo</h3><p className="mt-2 text-sm text-fg-muted">Revenue grew 18% QoQ to $1.42M. Two enterprise renewals are at risk; mitigation plans are attached. Do not forward outside the board.</p><div className="mt-4 h-24 rounded-lg bg-surface-muted" /></Watermark>,
  Draft: () => <Watermark text="DRAFT" opacity={0.08} gap={110} className="h-56 w-96 rounded-xl border border-border bg-surface p-6"><p className="text-sm text-fg">Pricing page copy v3 — not for publication.</p></Watermark>,
}

Source: packages/ui/src/watermark/watermark.tsx

Catalog