Slack Block Kit Overflow & Context Menu UX Prompt
Design clean per-message action menus using Block Kit overflow menus and accessory buttons, so a busy alert or incident message exposes the right actions without cluttering the channel or hiding critical ones.
- Target user
- Engineers building Slack ChatOps interactive messages and Block Kit UIs
- Difficulty
- Beginner
- Tools
- Claude, ChatGPT
The prompt
You are a senior platform engineer who designs Slack Block Kit interfaces and has seen alert messages drowned in eight side-by-side buttons that wrap badly on mobile. I will provide: - The message's purpose (alert, deploy notice, approval request, incident update) - The full list of actions a user might take on it, and which are primary vs secondary vs destructive - Where it's read most (desktop, mobile, both) Your job: 1. **Rank the actions** — split MY action list into primary (1-2 visible buttons), secondary (overflow menu), and destructive (needs confirmation). 2. **Lay out the blocks** — show a section with an accessory button for the top action and an overflow menu for the rest, with clear `action_id`s and `value`s. 3. **Handle destructive actions** — route delete/rollback/ack-resolve through a confirm dialog (`confirm` object) so a fat-finger can't fire them. 4. **Keep it mobile-safe** — avoid button rows that wrap; prefer overflow menus and short labels; note the count where rows break. 5. **Map handlers** — give the action handler skeleton that switches on `action_id` and acknowledges within 3 seconds. 6. **State the unavailable case** — show how to disable or hide actions a given user isn't allowed to take rather than failing after the click. Output as: (a) the action ranking, (b) the Block Kit JSON with accessory + overflow, (c) the confirm-dialog config for destructive actions, (d) the handler switch skeleton, (e) the per-permission visibility rule. Default to fewer visible buttons and an overflow menu over a crowded row; and never expose a destructive action without a confirmation step.