UI Toolbox logoUI Toolbox

ToggleButton

A ToggleButton is a Button that stays pressed, such as "Bold" or "Mute". A click turns value on, and the next click turns it off.

Two toggle buttons joined in a button set: Bold is pressed and has the accent color, Italic is not pressed

<tb:ToggleButton text="Bold" value="true" />
<tb:ToggleButton text="Mute" name="mute" />
var mute = root.Q<ToggleButton>("mute");
mute.RegisterValueChangedCallback<bool>(evt => AudioListener.pause = evt.newValue);
Member Description
value (value) True while the button is pressed. A change sends a ChangeEvent<bool>.
SetValueWithoutNotify(value) Sets the value and sends no event.
text, iconImage, clicked From Button. clicked runs on each click, before the value changes.

Tips:

Styling

Class Element
tb-toggle-button The button: --tb-color-surface-alt, with --tb-color-surface-hover under the pointer. The unity-button classes also apply.
tb-toggle-button--pressed On the button while value is true: --tb-color-accent with --tb-color-accent-text.

To show a pressed button with a line and no fill:

.unity-button.tb-toggle-button--pressed {
    background-color: var(--tb-color-surface-alt);
    color: var(--tb-color-text);
    border-bottom-color: var(--tb-color-accent);
    border-bottom-width: 2px;
}