Components / Onboarding and feedback / Timed gate
F5 · Onboarding and feedback New
Timed gate
A dialog over a blurred page after a timer. It ships off until this preview is armed.
<div data-yr="timed-gate" data-enabled="false">
<p>Off. The timer is not running.</p>
<button type="button">Preview the gate</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A product has decided to interrupt a page after a stated time.
- The interrupt can be turned off.
When not to use
- The default should be on.
- The page can explain the limit without covering the work. Use the soft gate.
Usage
<div data-yr="timed-gate" data-enabled="false">
<p>Off. The timer is not running.</p>
<button type="button">Preview the gate</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-enabled | false | false | The pattern ships off. |
| data-arm | button | — | Starts an 8 second timer in this preview only. |
| data-preview-gate | button | — | Opens the dialog without waiting. |
| blur | filter | off | Applied to the page only while the dialog is open. |
Keyboard
| Key | Action |
|---|---|
| Escape | Closes the dialog and disarms the timer. |
| Tab | Stays inside the dialog while it is open. |
| Enter | On Continue, closes the dialog. Nothing is sent. |
Accessibility
- The dialog is aria-modal and named Example gate.
- The timer state is text on the page.
- The default is off, so the page is usable without a pointer.
- Continue does not submit anywhere.
Motion
- Blur fades in 140 ms, the out token. Reduced motion removes the fade. The dialog itself does not scale.
Pattern origin
Pattern type: a timed interrupt over a blurred page. Off unless this preview is armed.