I'd like to create a button that works like the gif below. I'm not concerned with the content of the field changing. I just want to learn how to create a button that looks and works like the one in the gif. The button should be clickable on the top and bottom and temporarily become blue when clicked so that you know you clicked it. Togglerbar and setterbar do not seem to work this way. Is there another button option or a modification that I can use to get this functionality?

enter image description here


2 Answers 2


You can use two individual instances of Button

Button["\[UpArrow]", Print["up"]], 
Button["\[DownArrow]", Print["down"]]},
Spacings -> -1]


Unfortunately Button misbehaves on some systems when it comes to changing its size to just encompass its label (see this question). You might also notice a small optical glitch (visible in the .gif above as well) that when pressing the top button, part of the bottom button gets hidden behind a white margin.

Together with an InputField and smaller labels to fit in one row with the InputField the whole thing might look like this


DynamicModule[{x = 0},
     InputField[Dynamic@x, FieldSize -> 2], 
             Button["\[FilledUpTriangle]", x++, ImageSize -> Small], 
             Button["\[FilledDownTriangle]", x--, ImageSize -> Small]}, 
             Spacings -> -0.65]
  • $\begingroup$ Thank you. Yes. I think there might be a bug with Button[]. It seems you can't go smaller than a certain width for some reason, unless you change appearance to "palette". mathematica.stackexchange.com/questions/100990/… $\endgroup$
    – B flat
    Dec 16, 2016 at 8:31

I thought this would fun to try. I got something close, but perhaps not close enough to get a cigar.

With[{size = 20}, 
  up = 
      {Circle[{0, .75}, 1, {0, π}], 
       Line[{{-1, .75}, {-1, 0}, {1, 0}, {1, .75}}],
       Triangle[{{-.75, .75}, {0, 1.5}, {.75, .75}}]},
      ImageSize -> size];
  down = 
      Rotate[#, 180 °, {0, 0}] & /@ 
        {Circle[{0, .75}, 1, {0, π}], 
         Line[{{-1, .75}, {-1, 0}, {1, 0}, {1, .75}}],
         Triangle[{{-.75, .75}, {0, 1.5}, {.75, .75}}]},
      ImageSize -> size]];

  {{n, 0}, None},
      {Button[up, n++, Appearance -> None],
       Button[down, n--, Appearance -> None]},
      Spacings -> 0],
    ContentPadding -> False,
    FrameMargins -> None],
  AppearanceElements -> None,
  ControlPlacement -> Right]

This certainly has the desired functionality. The question is whether or not it fakes the desired look-and-feel well enough.


  • $\begingroup$ @Sascha. Thanks for the animated GIF. $\endgroup$
    – m_goldberg
    Dec 16, 2016 at 7:40
  • $\begingroup$ You are welcome:) if you are using macOS I can highly recommend this app for capturing .gif files from your screen $\endgroup$
    – Sascha
    Dec 16, 2016 at 7:44

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.