imitation
Watermark
A repeating diagonal mark laid over its children.
Draft proofThe overlay never blocks clicks or text selection
Harbour rebrandLaunch plan
Budget £48,200. Not for distribution before 24 Oct.
In context
Signage proofSent to the printer with a mark until it is approved
depot-fascia-final.pdfDepot signage, 1.4 MB
Props
| Prop | Type | Required | Default |
|---|---|---|---|
text | string | undefined | No | REBAR UI |
image | string | undefined | No | — |
imageSize | [number, number] | undefined | No | — |
gap | [number, number] | undefined | No | [100, 100] |
rotate | number | undefined | No | -22 |
fontSize | number | undefined | No | 16 |
color | string | undefined | No | rgba(0, 0, 0, 0.15) |
opacity | number | undefined | No | 1 |
className | string | undefined | No | — |
Also available as a prop
Card and AspectRatio both take a watermark prop that wraps their own content in this component internally — the two most common places a real watermark is needed (a document/content card, a licensed or draft image) don't need the caller to reach for Watermark directly.
data-rebar-* attributes
data-rebar-component="watermark" on the root; the overlay itself carries data-rebar-part="overlay" and aria-hidden="true" — it never blocks interaction with, or gets announced as part of, the real content.
Migrating to Ant Design
AntD's own Watermark is a close structural match (content/image/gap/rotate/font) — a migration maps these props across directly.