Guidelines
Interaction patterns
Interaction patterns in Stance: interactive states, choosing between dialogs, popovers, menus and drawers, feedback timing and destructive actions.
Interactive states
Every interactive element has distinct rest, hover, active, focus-visible, disabled and, where relevant, selected, invalid and loading states. Hover uses a translucent ink layer, so it works on any surface.
Overlays
- Dialog for focused tasks that block the page. Escape and the close button always dismiss it.
- AlertDialog for destructive confirmations. Outside clicks never dismiss it, and focus starts on the safe action.
- Popover for non-blocking detail or small forms anchored to a trigger.
- Menu for lists of actions; Select for choosing a value. They are not interchangeable.
- Drawer for secondary workflows that keep page context visible.
Feedback
- Respond to every action within 100ms. Show a loading state on the control that started a slow action.
- Use Toast for confirmations of completed background actions, Alert for inline status, and Banner for page-wide announcements.
- Errors say what happened and how to fix it, next to where it happened.
Destructive actions
Prefer undo over confirmation for reversible actions. For irreversible ones, confirm with an AlertDialog that names the object and the consequence, with a danger-toned action labelled with the verb (“Delete template”).