Home Edit button
The menu's Edit button: turns arranging Home on, and says Done while dragging and removing apps is on.
openvibe-shared/ov-homeJSON
Build it
<button type="button" aria-label="Edit Home">Edit</button>Props
edit- boolean
label- string?
Anatomy
- buttonA text button in the Home header; its label is Edit at rest and Done while arranging.
Behaviour and access
- Keyboard
- Keeps the focused control in view
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- The label changes; no movement is needed.
- Name
- Edit Home, or Done arranging Home
- Target
- At least 44 × 44 px
- Focus
- Tab reaches it first in the Home header; Enter or Space toggles edit mode.
States
- default
- editing
- focused
Tokens
color.accent.strongsize.tap
Android · Jetpack Compose
IconButton
Use a TextButton or IconButton in the grid header that toggles edit mode; Done replaces Edit while arranging.
iOS · SwiftUI
Use a Button in the header that toggles Edit; Done replaces it and focus returns to it.
Markup
Default
<button type="button" class="ovh-sec" aria-label="Edit Home" title="Edit Home: move apps, remove them, add folders">Edit</button>