Mushilu-San UI Swipe action
A list row that reveals action buttons when swiped, such as delete or archive.
Selector: mui-swipe-action
import { SwipeAction } from '@mushilu-san/ui/mobile';Loading example…
Overview
actions, and actionTriggered emits the key of the chosen action. Each action sets a side, start or end, which flips in RTL.
When to use
Per-row shortcuts in a phone list, such as archive or delete. Lists where the same two or three actions apply to every row.
When not to use
Actions that need a confirmation or explanation. Use a dialog. Use Alert dialog instead.Actions users must discover on desktop. Show them in the row.
Guidelines
Do
Use colour and a text label on each action. Put the most destructive action last.
Don't
Do not make a destructive action the only way to delete a row. Confirm it.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
row | listitem | |
more actions button | button | aria-expanded follows the reveal state. |
action group | group |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| EnterSpace |
Put the rows inside a list, so each row is announced as a list item.
API
SwipeAction
| Name | Type | Default | Description |
|---|---|---|---|
actions | SwipeActionItem[] | [] | Action descriptors. |
| Name | Type | Description |
|---|---|---|
actionTriggered | string | Emits the key of the triggered action. |
CSS parts
::part(a11y-btn)::part(action)::part(container)::part(kbd-collapse)::part(kbd-trigger)::part(root)::part(track)
Tokens
--mui-color-danger--mui-color-success--mui-color-warning--mui-color-primary--mui-color-surface--mui-touch-target