Swipe Actions
Actions behind a row of a list, as the swipe actions of an iOS list: a swipe across the row reveals them, a full swipe runs the first one, and each is a button for the keys.
import { SwipeActions } from "@plexui/ui/components/SwipeActions";Swipe actions keep the actions of a row out of sight until they are wanted, as the swipe actions of an iOS list do: a swipe toward the leading edge reveals the trailing actions, a swipe toward the trailing edge the leading ones, and a full swipe runs the first action of that side. Give a row the actions people take on it often, such as Delete or Archive, and keep the same actions in reach elsewhere too, as in a menu, for people who never swipe.
Examples
The examples show the phone view.
Overview
Labels inside
Labels below
API
SwipeActions
| Prop | Type | Default | Description |
|---|---|---|---|
leading | SwipeAction[] | [] | Actions revealed by a swipe toward the trailing edge, the first one at the leading edge |
trailing | SwipeAction[] | [] | Actions revealed by a swipe toward the leading edge, the first one at the trailing edge |
labelPlacement | "hidden" | "inside" | "below" | "hidden" | Where the actions show their labels: symbols only, inside the capsule, or below it (for rows of 68px and taller) |
fullSwipe | boolean | true | A swipe past the middle between the open actions and the far edge runs the first action of that side |
className | string | — | CSS classes applied to the row |
children | ReactNode | — | The content of the row |
SwipeAction
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique ID of the action within its side |
label | string | — | Name of the action: shown inside or below the capsule (and on an action without an icon), and its accessible name always |
Icon | ComponentType<SVGProps<SVGSVGElement>> | — | Icon of the action |
color | "primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning" | "secondary" | Solid color of the action |
onSelect | () => void | — | Called when the action is pressed, or by a full swipe when it is the first action of its side |
A swipe starts once the finger has gone 10px across the row and farther across than down; a drag down scrolls the list, and a drag in a text field or along a slider stays with that control. A click that ends a swipe, or that closes an open row, does not reach the content. Each action is also a button, in the order of the screen: the leading actions before the content, the trailing ones after it. The focus on an action reveals its side, and the row closes when the focus leaves it; an action chosen from the keys keeps the focus, so its side stays open. The row has data-revealed with the side it shows, and data-swiping while a finger moves it.
Styling
SwipeActions reads these component tokens. Override them at any scope to restyle it:
--swipe-actions-gap,--swipe-actions-edge-inset,--swipe-actions-content-gap: the space between the actions, from the edge, and from the content (default10px,16px,10px)--swipe-actions-action-height,--swipe-actions-action-min-width,--swipe-actions-action-padding-inline,--swipe-actions-icon-size: a capsule with its symbol only (default44px,60px,8px,20px)--swipe-actions-labeled-min-width,--swipe-actions-labeled-padding-inline,--swipe-actions-labeled-icon-size,--swipe-actions-label-gap: a capsule with its label inside (default84px,4px,18px,8px)--swipe-actions-label-font-size,--swipe-actions-label-line-height,--swipe-actions-label-font-weight: the labels (default13px,15px, normal)--swipe-actions-tall-action-height,--swipe-actions-tall-padding-top,--swipe-actions-tall-padding-bottom,--swipe-actions-caption-gap,--swipe-actions-caption-font-weight,--swipe-actions-caption-color: a capsule with its label below (default38px,6px,4px,5px, medium, the secondary text color)--swipe-actions-background,--swipe-actions-content-background: behind a revealed row and its content, unset by default (on a phone the canvas of the Page or Dialog and the fill of its FieldGroups, on a desktop the secondary surface and the surface)--swipe-actions-content-radius: the round side of the content (default9999px)--swipe-actions-duration: how long the row takes to open or close (default250ms)