Grabber
Drag handle for reorderable lists, sortable kanban cards, and drawer pull tabs. Two rows of dots, grab cursor on hover, grabbing on active.
Default
Sits to the left of a reorderable row. The class is presentation — drag wiring is the consumer's.
Pull tab
Horizontal sibling — the 38 × 4 px pill that lives at the top of bottom-sheets and drawers.
Parts
| Property | Value | Notes |
|---|---|---|
| shape | 2 × 3 dot grid | 3 px dots, 2 px gap. |
| colour | --text-subtle | Hover lifts to --text-muted. |
| cursor | grab → grabbing | Switches on :active. |
| hit area | ≥ 16 × 24 | Padded button keeps the target reachable. |
| focus | 2 px outline | Keyboard-reorder controls focus here first. |
Do & don't
Pair with a keyboard reorder affordance (arrow-key shortcuts, "Move up / down" menu) — mouse-only drag fails for ~20% of operators.
Use it as a generic "more" affordance. The grab cursor signals "this moves", not "this opens".
Anchor the grabber to the left of the row so the eye sees the affordance before the content.
Render grabbers on rows that aren't reorderable. The cursor lies if the action isn't available.
Accessibility
- The grabber is a button. Give it
aria-label="Reorder <item>"so screen readers know what moves. - Wire arrow-key reorder (↑ / ↓) when focus is on the grabber. Announce the new position via
aria-live="polite". - The pull-tab variant is purely decorative — give it
aria-hidden="true"and let the sheet's swipe-down gesture (or its close button) do the work.
Code
<!-- Reorder grabber (button — keyboard-reachable) --> <button class="p-grabber" aria-label="Reorder Branch Manager"> <i></i><i></i><i></i> <i></i><i></i><i></i> </button> <!-- Pull tab for sheets / drawers (decorative) --> <div class="p-grabber-pull" aria-hidden="true"></div>
Related
For the parent sheet, see Bottom sheet. For reorderable rows in a list, see Mobile list.