Watermark
A fully accessible, token-driven Watermark component built with strict WAI-ARIA compliance.
tsx
import { Watermark } from '@nofinite/nui';Interactive Preview
Loading preview...
Usage
Basic Example
tsx
import { Watermark } from '@nofinite/nui';
<Watermark />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | string[] | — | The text to display. Can be an array for multi-line watermarks. |
opacity | number | 0.05 | — |
rotate | number | -20 | — |
gap | number | 120 | The spacing between watermark instances |
fontSize | number | 16 | — |
color | string | currentColor | — |
zIndex | number | 10 | — |
Accessibility & Guidelines
- Semantic Tokens: Built strictly using Nuicss semantic tokens (
bg-surface,text-default,border-subtle,bg-primary). - Keyboard Navigation: Adheres to strict WAI-ARIA standards.
- Screen Reader Support: Includes semantic roles and live regions where appropriate.