How can I create a help button that looks more "professional"?

Question

My goal, is to make the following button,

Button[Style["?", Black, Bold], MessageDialog[Column[{Style["Help", Bold, Black, FontSize
-> 12],"Some Text Here"}], WindowTitle -> "Help", Background -> White]];

look more like a "canonical" help button. If we take a look at most programs, these types of buttons have a distinguished stylization.

An example could be:

How would I achieve this in Mathematica while keeping the same structure of my above code?

Have you tried some graphics or image instead of Style["?", Black, Bold]? — Michael E2, Jan 26 '18 at 03:19
@MichaelE2 I tried Button[Import["https://i.stack.imgur.com/ugb7b.png"], MessageDialog[ Column[{Style["Help", Bold, Black, FontSize -> 12], "Some Text Here"}], WindowTitle -> "Help", Background -> White]] — user372003, Jan 26 '18 at 03:26
Mike's answer is pretty much what I had in mind, and pretty much equivalent to what you tried. The buttons of most programs are designed by their development team (or they pay a designer to do it). — Michael E2, Jan 26 '18 at 03:29

Mike Honeychurch · Accepted Answer · 2018-01-26T03:29:44.417

Why not just use the graphic in the question, or any other images that you like:

Use ImageSize to control the final size of the button:

An alternative, that I use in some applications, is something like this:

help[$helpmessage_: "", $videolink_: ""] := 
  ActionMenu[
   Graphics[{{RGBColor[0.689647, 0.761166, 0.805478], 
      Disk[{0, 0}, 0.1]}, {GrayLevel[0], Circle[{0, 0}, 0.1], 
      Style[Inset["?", {0.01, 0}], "Label", FontSize -> 11]}},
    ImageSize -> {20, 20}],
   {"Help Notes" :> MessageDialog[
      Grid[{
        {Style[$helpmessage, LineIndent -> 0]}
        },
       Alignment -> {Center, Center},
       ItemSize -> {Automatic, All},
       Spacings -> {0, 0}],
      Background -> White],
    "View Video" :> SystemOpen[$videolink]},
   Appearance -> None,
   BaseStyle -> {},
   FrameMargins -> {{0, 0}, {-2, -2}},
   ImageSize -> {20, 20}];

Yes I was thinking about using import, but I wanted to know is there was a way to do it only with Mathematica functions. Anyways, is there a way to make the image smaller? Would Image size still work in this case? — user372003, Jan 26 '18 at 03:26
@user372003 you don't need to import, just cut/copy and paste. See the edit for using ImageSize — Mike Honeychurch, Jan 26 '18 at 03:32

score 11 · Answer 2 · answered Jan 26 '18 at 06:05

Here's the general way this type of thing seems to be handled in the built-in things plus code to build the type of buttons you want.

First the button code:

makeDisk[gradSpec_, n_] :=
  Rasterize[
   Module[{img, disk, edge},
    img =
     RadialGradientImage[
      gradSpec,
      n
      ];
    Graphics[
     {
      Inset[img, Center, Center, Scaled[1]],
      White,
      Annulus[{0, 0}, {1, 2}],
      GrayLevel[.8],
      EdgeForm[Gray],
      Annulus[{0, 0}, {1, 1.1}]
      },
     Background -> None,
     PlotRange -> {{-1.2, 1.2}, {-1.2, 1.2}},
     ImageSize -> n
     ]
    ],
   Background -> None
   ];
With[{n = 80},
 imOut =
  makeDisk[
   {{.8*n, 5}, {n, n}} ->
    {Hue[.6, .6, 1], Hue[.6, 1, 1], 
     Hue[.6, .3, 1]}, 
   n
   ];
 imHov =
  makeDisk[
   {{.8*n, 5}, {n, n}} ->
    {Hue[.6, .4, 1], Hue[.6, .8, 1], 
     Hue[.6, .3, 1]}, 
    n
   ];
 imIn =
  makeDisk[
   {{.3*n, .6*n}, {n, 5}} ->

    Reverse@{Hue[.6, .6, 1], Hue[.6, 1, 1], Hue[.6, 1, 1]},
    n
   ];
 {imOut, imHov, imIn}
 ]

And here's a way to get hover actions and things:

Button[
 Style["asd", White, Bold],
 Appearance ->
  {
   "Default" -> imOut,
   "Hover" -> imHov,
   "Pressed" -> imIn
   }
 ]

looks like the Appearance option only takes bitmap images (not primitives)? — Mike Honeychurch, Jan 27 '18 at 22:33
@MikeHoneychurch it only takes images, but crucially it can take nine patch images so it can resize adaptively. — b3m2a1, Jan 27 '18 at 23:42
@MikeHoneychurch exactly. I posted an answer about how to make these which shows the utility of them. — b3m2a1, Jan 27 '18 at 23:48

Michael E2 · Answer 3 · 2018-01-26T03:50:10.857

A couple of images that come with Mathematica. Caveat: There's no guarantee that they will be present in all (future) versions.

Button[
 Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
    "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
    "CodeCompletion", "MenuItemHelpTiny@144dpi.png"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Mathematica graphics

Button[
 Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
    "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
    "Help@144dpi.png"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Mathematica graphics

Update

These change color slightly when the mouse is over the button:

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "MenuItemHelpTiny@144dpi.png"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "MenuItemHelpHoverTiny@144dpi.png"}]
   ]
  ],
 Beep[],
 Appearance -> "Frameless"]

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "Help@144dpi.png"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "HelpHighlight@144dpi.png"}]
   ]
  ],
 Beep[], 
 Appearance -> "Frameless"]

based on 138889 it can be reduced to: Button["", Beep[], Appearance -> {"Default" -> FrontEnd`FileName[{"Ribbons", "Common"}, "Help@144dpi.png"] , "Hover" -> FrontEnd`FileName[{"Ribbons", "Common"}, "HelpHighlight@144dpi.png"] }] — Kuba, Jan 26 '18 at 05:48

score 4 · Answer 4 · answered Jan 27 '18 at 23:38

When I tried using the methods described here based on the Appearance option for Button it seems that only bitmaps were valid, i.e. primitives didn't seem to be valid ...unless I have not coded correctly.

I normally prefer not to use bitmap images in interfaces because the aesthetics breaks down when the magnification changes -- you can always lock that down but not ideal for your users. Appearance differs across platforms as well. So in an ideal world buttons and controls based on primitives are better.

By redefining @b3m2a1 function this can be achieved:

makeDisk2[gradSpec_, n_] :=
  Module[{img, disk, edge},
   img = RadialGradientImage[gradSpec, n];
   Graphics[{
     Inset[img, Center, Center, Scaled[1]],
     White, Annulus[{0, 0}, {1, 2}], GrayLevel[.8], EdgeForm[Gray], 
     Annulus[{0, 0}, {1, 1.1}]},
    Background -> None,
    PlotRange -> {{-1.2, 1.2}, {-1.2, 1.2}},
    ImageSize -> n]];

With[{n = 30},
 imOut1 = 
  makeDisk2[{{.8*n, 5}, {n, n}} -> {Hue[.6, .6, 1], Hue[.6, 1, 1], 
     Hue[.6, .3, 1]}, n];
 imHov1 = 
  makeDisk2[{{.8*n, 5}, {n, n}} -> {Hue[.6, .4, 1], Hue[.6, .8, 1], 
     Hue[.6, .3, 1]}, n];
 imIn1 = makeDisk2[{{.3*n, .6*n}, {n, 5}} -> 
    Reverse@{Hue[.6, .6, 1], Hue[.6, 1, 1], Hue[.6, 1, 1]}, n];
 {imOut1, imHov1, imIn1}
 ]

Button[Dynamic@Overlay[{
    Which[
     CurrentValue["MouseOver"] == True&&CurrentValue["MouseButtons"] == {1}, button = imIn1,
     CurrentValue["MouseOver"] == True, button = imHov1,
     True, button = imOut1],
    Style["?", White, 18, Bold]
    },
   Alignment -> Center],
 Appearance -> None]

here is a pick of primitive (top) and raster buttons (bottom) at 100%

and again at 200%

How can I create a help button that looks more "professional"?

4 Answers4