Is it a good idea to give exit/close icon to top along with close button text after the content ends on a modal

If answer is not a good idea, please explain

Close Icon on Top and Close button in the bottom sample



Now that I see the screenshot, I would like to update my answer.

Keep both. It is better for usability.

Ah! The age-old battle of usability v/s aesthetics!

As a rule of thumb, every (literally) UX manual, handbook and article would say that icon without text is bad for Call to Actions.

But more often than not, you'll see icons for actions like minimize, maximize, close, save, menu, back, forward, etc. Case in point, look at your PC (or Mac) screen right now!

But there's another way of looking at actions like these, they usually are sitting next to a pile of textual data or with a collection of half a dozen actions. Here, the problems like lack of space and label order confusion comes into play. Also, if the icons have been standardized over time then there's no point mentioning what they mean.

I'd say, in your case

Don't use text label

Refer to this question and its answers for some great points on where and when icon with text should be used.

  • Thanks for your inputs. I have updated the design sample for reference. My question was to know weather to use both icon as well as text button on the screen. Hope my question is more precise. Jun 6 '17 at 7:31
  • Oh! Well, I had understood the question wrong. Check the updated answer Jun 6 '17 at 9:29

You can place both the close button as well as the close icon in the design, there is no harm in that. According to your design, it seems like a warning modal. So it is quite obvious that once one read will look for the close option in the modal. As generally, the close in modal is in the top right corner, so automatically your hands will to that direction. So it is good if you place the close icon there. In some case, suppose the internet is slow the icon/close image won't get loaded, and the close button is also not there, one get confused about how to close modal. So, keeping both is a good idea as they both have their significance.


Since the above design which you have provided contains only contains an informative message. It's better to have close below text. Instead of close on top and bottom because there is a high possibility that user might/may try to ignore the warning and close the dialog from the top.

You can refer this post.

Not the answer you're looking for? Browse other questions tagged or ask your own question.