I'm currently working on visual design for web application which use Angular 2/ Material design. In there, I have a doubt regarding a MD dialog header design, does it need to be with background colour or just the header text on the dialog without background colour? where I couldn't find further details on MD guideline. Appreciate you help/comments.

With the background colour- sample

enter image description here

Without background colour- sample

enter image description here

3 Answers 3


If you are going material, then they have guidelines for dialogs.

Generally, if your pop-up dialog is just confirmation or small interaction in the process of a larger workflow, you need not have a separate title bar color.

It appears from your example that you are designing a pop-up dialog which, I am guessing, will be a part of a larger workflow. I will not recommend a title color in this case.

However, adding a user is generally a form. If you are adding a user in a dialog, I want to know more about your use case.

Title colors are separate when they denote a certain independent function or module of your application. These independent functions or modules have their own screens. These screens deserve a color treatment for the title.

I hope I have been of some help.

  • 1
    Thanks for taking up my question, yes the answer is helpful. I will explain the context. Basically I have list of users within a grid (table with 5-100 rows). To add users, I thought of having dialog, since there are less fields (less than 6 fields) need to be filled to add the user. rather than direct user to a another page, I though of dialog would be the proper one, not sure though??? Yes, this is going to be a large work flow but User-profile is a separated task.
    – NPN
    Commented Feb 21, 2017 at 6:45
  • So adding a user is a step in a long chain. That means, you do not need a separate title bar color for a dialog if you are going with material design.
    – Harshal
    Commented Feb 21, 2017 at 6:49
  • Yes, I thought of same way since you explain this. thanks.
    – NPN
    Commented Feb 21, 2017 at 22:13
  • I do not really agree with the answer, but open to debate. The guidelines are firstly conceived for mobile, even though we will try to apply the same rules for the web. IMO your dialog is closer to a "Full-Screen Dialog" from the guideline (includes set of form fields ; not a simple message or unique item to select) ; unfort. these specs apply only to mobile. There are no recommendations for the web for these kind of dialogs. That's why I'd suggest - for this specific use case - to feel free to add a background color on your dialog if you feel it looks nicer ; but that's just my opinion.
    – Matthew
    Commented May 30, 2017 at 14:17

Make dialog component obey your material theme.

Its official documentation also allows you to use background colors to dialogs if it suits your application theme - https://material.io/guidelines/components/dialogs.html#dialogs-confirmation-dialogs

Deciding whether to use background color or not based on its content will cause consistency issue. So, in general, if your application theme is demanding to use background colors for titles - do use it.

  • Thanks for answering this, yes I would rather go with the theme, which I do not think use of background colour for Dialog header.
    – NPN
    Commented Feb 21, 2017 at 22:11

If your using as dialog, There is no need to add color for the header.

Check this link: http://codepen.io/Garbee/full/EPoaMj/

In case if it's on the new window. Then you can add a color based on customized (primary, secondary) color you need. https://material.io/guidelines/components/dialogs.html#dialogs-specs

  • It is depend, in my situation: as I explained, I think I would not use background colour for Dialog header. Thanks.
    – NPN
    Commented Feb 21, 2017 at 22:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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