Media
Watermark
A watermark that tiles translucent text or an image across its children. The overlay sits behind pointer events and hides from assistive tech, so the content underneath stays usable.
ReactVueWeb Components
View in Storybook Playground
Examples
<Watermark text="Confidential" rotate={-22} opacity={0.1}>
<p>Protected content</p>
</Watermark>Props
| Name | Type | Default | Description |
|---|---|---|---|
text | string | — | Text to tile as the watermark. |
image | string | — | Image URL to tile instead of text. |
rotate | number | -22 | Rotation in degrees. @default -22 |
gap | [number, number] | — | Gap between repeated tiles as `[x, y]` in pixels. @default [100, 60] |
opacity | number | 0.12 | Opacity of the overlay (0–1). Keep subtle to avoid obscuring content. @default 0.12 |
children | ReactNode | — | Content rendered beneath the watermark. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.