Orvain2 sources · 2.5s
Use the Error intent of the Skeuomorphic button for the confirming action, and keep Cancel as the neutral secondary beside it . Put the destructive button on the right, where the primary sits in every other modal .
AI Chat
AI chat is the surface an assistant answers through: a thread of questions and replies, a composer to ask in, and the states in between that say the assistant is working.
Get Pro to installPro7 blocksReact, Vue and Figma
Orvain assistant1
New chat
Which button should I use for a destructive action in a modal?
- Button intentsorvain.dev/docs/button
- Dialog patternw3.org/wai/aria/apg
- Modal footer layoutorvain.dev/blocks/modals
- Error colour tokensorvain.dev/docs/tokens
Use the Error intent of the Skeuomorphic button for the confirming action, and keep Cancel as the neutral secondary beside it . Put the destructive button on the right, where the primary sits in every other modal, so the order never changes with the risk .
Copy
Regenerate
Good reply
Bad reply
Every block in the set#
When to use#
- An assistant that answers from your own content, where showing the sources is what makes an answer usable.
- A team that reuses the same handful of prompts and should not have to retype them.
- Writing help on text someone has already written, where they want to see the change before accepting it.
The whole set, with its codePro
Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.