HoverActions
A row whose actions show on hover and keyboard focus, with an accent bar.
import { HoverActions } from "@butteryui/react";Demo
When to use it
Use it for
- A list of things, each with an action that would clutter the list if every row showed it, such as a settings gear
- Rows in a settings list or a short table-like list
Not for
- The row's main action: make the row itself the link or button
- A DataTable's row actions: DataTable shows its own menu button
- Actions people need to find without hovering: show them as buttons
Examples
Notification rows
Notification rows whose settings gear shows on hover or keyboard focus, each opening its topic.
No topic open
Saved addresses
A shop's saved pickup addresses, each with a remove action that shows on hover or keyboard focus.
12 Mill Street, Portland
40 Oak Lane, Portland
2 saved
Variants and states
Settings rows
Point at a row, or Tab to its gear, to show its action and bar.
Emailed every morning
Emailed when a payout is sent
Off
Props
HoverActions
| Prop | Type | Default | Description |
|---|---|---|---|
actionsrequired | ReactNode | The row's actions, such as a small IconButton, kept out of sight until the row is hovered or holds focus. | |
children | ReactNode | What the row shows. |
It also takes ComponentPropsWithRef<"div">.
Accessibility
The actions stay in the tab order while out of sight, so Tab reaches each one and shows it (and the row's bar and tint) while it has focus. On a touch screen, which can't hover, the actions always show. The bar is decorative and hidden from screen readers; name each action for its row, such as "Settings for payouts".
| Keys | What they do |
|---|---|
| Tab | Reaches each of the row's actions in turn, showing them with the row's tint and bar while one has focus |
Motion
It answers the pointer and keyboard focus within `--bt-dur-fast`, such as an arrow growing its stem, without changing size.
With reduced motion: Its actions fade in over 100ms rather than 120ms; the tint and the bar show at once, as they always do.
Layout
It fills its container's width, padded 8px above and below and 12 at the sides, its content taking the room the actions leave 16px after it; long content shrinks rather than pushing them out. Hidden actions only fade, so they keep their room and nothing moves when they show, and each keeps its own hit area. The 2px accent bar runs the row's full height at its start edge.
Related
See it in the roastery demo's settings.