Esc to close hint
Small <kbd>Esc</kbd> to close chip
pinned to the bottom-right of every modal and switcher dialog so keyboard users discover the shortcut.
Use the koala-esc-hint tag helper
inside any modal whose content panel is positioned (relative).
Hidden on mobile (<sm) — touch users have no keyboard.
Anatomy
A floated chip that doesn't intercept clicks.
Modal title
Some modal content. The Esc chip sits in the bottom-right.
<div class="relative ...">
<!-- modal content -->
<koala-esc-hint />
</div>
Where it's used
Built into the centralized modal tag helpers so every consumer gets it for free, and added inline to the bespoke modals.
| Surface | How |
|---|---|
koala-confirm-modal |
Built in — every confirm modal has the chip. |
koala-list-filters |
Built in for the mobile filter modal. |
| Org / Partner / Branch switcher modals | <koala-esc-hint /> inline. |
| Bespoke modals (close quote/transaction, changes, referral QR) | <koala-esc-hint /> inline. |
Behaviour
| Property | Value |
|---|---|
| Position | absolute bottom-3 right-3 — parent must be positioned. |
| Visibility | hidden sm:flex — hidden on mobile (no keyboard). |
| Pointer events | pointer-events-none select-none — doesn't block clicks beneath. |
| Accessibility | aria-hidden="true" — visual hint only; ESC handler lives on the modal itself. |