# Highlight 'Save draft' button

**URL:** https://meta.discourse.org/t/highlight-save-draft-button/258074
**Category:** UX
**Created:** [March 14, 2023, 8:42am UTC](https://meta.discourse.org/t/highlight-save-draft-button/258074 "2023-03-14T08:42:40Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [March 14, 2023, 8:42am UTC](https://meta.discourse.org/t/highlight-save-draft-button/258074/1 "2023-03-14T08:42:40Z")

</div>

Sometimes users write a long paragraph in the composer, but suddenly need to close the composer to do something else, or reply to some more important posts.

A modal will be displayed asking the user what they want to do with their existing posts.

But here’s a problem. The “Discard” button is `btn-danger`, which has a red background, so it becomes the most visually prominent button of the three.

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/6/4/164854cd642c6289ffa935c3f8374872dd13ca0b.png)

Users have to expend extra brainpower to go around the corner, asking them to click the unobtrusive “Save draft” to save their drafts. Once they click the most prominent red button without thinking, their draft is gone forever.

I think maybe putting the delete button at the end of the three buttons, and using `btn-primary` to emphasize a button that the user is most expected to choose can reduce this danger and get a better user experience.

Like this…

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/9/5/f9567947820098d6639cc9c8e2302691c726003e.png)

---

<div class="post-metadata">

### Author: ![Lhc\_fl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lhc_fl/32/268115_2.png) [@Lhc\_fl](https://meta.discourse.org/u/Lhc_fl)
#### Post date: [March 14, 2023, 8:48am UTC](https://meta.discourse.org/t/highlight-save-draft-button/258074/2 "2023-03-14T08:48:25Z")

</div>

Okay maybe that one just looked a bit like the blinking lights on a police car… so maybe this?

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/2/1/421111dc1a8ae9f31817133656aecf28eb1d9926.png)

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [March 14, 2023, 10:04am UTC](https://meta.discourse.org/t/highlight-save-draft-button/258074/3 "2023-03-14T10:04:26Z")

</div>

I actually quite liked your first suggestion. 🙂

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [March 14, 2023, 10:10am UTC](https://meta.discourse.org/t/highlight-save-draft-button/258074/4 "2023-03-14T10:10:25Z")

</div>

And I liked second one 😉

But the conclusion made by majority is both are better than default 🤣

---

<div class="post-metadata">

### Author: ![hoangphuctran93](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangphuctran93/32/290976_2.png) [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [March 14, 2023, 10:26am UTC](https://meta.discourse.org/t/highlight-save-draft-button/258074/5 "2023-03-14T10:26:43Z")

</div>

hope someone can write a css to support this ^^