Editor patterns
5 patterns built for editor interfaces.
Quick Select
A dropdown for two or three choices makes you open a list, read it and aim at a row — three steps to flip something you already understood.
SelectionProductivityFilesEditor- Keyboard
- Touch
- Responsive
- Reduced motion
Contextual Toolbar
A toolbar serving two jobs is either wide enough to show both at once and too big to sit over content, or split in two so you have to find the right one first.
LayoutAIMediaEditor- Keyboard
- Responsive
- Reduced motion
Inline Overflow
A toolbar with more actions than fit has to hide some, and a dropdown moves them to a different surface where they stop feeling like siblings of the primary actions.
DisclosureProductivityEditorFiles- Keyboard
- Responsive
- Reduced motion
Create Menu
A create button does not say what you can make, and a dropdown answers as a list you have to read in sequence to find the one item you came for.
SelectionProductivityDashboardEditor- Keyboard
- Touch
- Responsive
- Reduced motion
Editable Label
Renaming something usually means leaving for a settings screen, which hides the thing you are renaming at the moment you decide what to call it.
InputProductivityEditorForms- Keyboard
- Touch
- Responsive
- Reduced motion