Hitbox
UtilityStable
Expands the click/touch target of a small element without affecting its visual size. Use for icon buttons and small interactive elements.
Quick Import
import { Hitbox } from "@cohere-ai/waypoint-ui/hitbox";Live Preview
Loading Hitbox...
Props
| Name | Type | Default | Description |
|---|---|---|---|
size | 'default' | 'sm' | 'lg' | string | - | Hit area size (also accepts arbitrary CSS value) |
position | 'all' | 'top' | 'bottom' | 'left' | 'right' | 'vertical' | 'horizontal' | 'all' | Which sides to expand |
radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'none' | Corner radius of the hit area |
debug | boolean | false | Shows a visual overlay of the hit area |
Examples
Expanded Hit Target
Small icon button with expanded click area
1 import { Hitbox } from '@cohere-ai/waypoint-ui/hitbox'; 2 3 <Hitbox size="default" asChild> 4 <button className="size-4" aria-label="Close">×</button> 5 </Hitbox>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Hitbox component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.