How can I design this toggle button to make more sense?

Question

I have this toggle button that toggles whether "trails" are on or not. Currently, I have one button that changes it's own text to toggle the state from "ON" to "OFF".

I've seen other posts that answer with the solution of having multiple buttons and having one button turn off the others when clicked on. This does not seem practical as I need to conserve as much space as possible. (It is a toolbar that is fixed on a webpage.)

How can I make this more practical? Or is it okay how it is?

Answer 1

Problems that I see with your approach are:

1. The actions reset and clear trails are probably buttons. Whereas Trails: ON is a toggle. When these two different action elements looks the same, user will be confused because of the similarity of these elements. Therefore in my suggestion, you can see that I have used a different component for toggle action (toggle button - it is familiar too)
2. The second button "Clear Trails" could be shorter. Therefore in my suggested option 1.1 and 1.2 you can see I changed it to "Clear". This is possible if you are able to make "Trails" as a header of the group as in Option 1.

Solution considerations:

1. If you are able to change the ordering of the items, I suggest Trails with the toggle to be the first item of the group.
2. Consider options 2 and 3 if you have constraints resticting you from going with Option 1.
3. From @quack's comment above, you can also think about adding "Trails are ON" as in option 3.
4. As one of your considerations is to save space, Option 1.2 might be better than 1.1, as it saves a bit more space by not having the white elevated card as background.