#Buttons and built-in controls

Unity's own controls take the theme in a workspace: Button, Toggle, RadioButtonGroup, Slider, MinMaxSlider, TextField, DropdownField, Foldout, ProgressBar, ToggleButtonGroup and GroupBox. This page lists the classes that you add to a Button or a GroupBox, and the built-in controls that have their own rules. The ButtonsDemo and Styles example scenes show them in a workspace.

The classes are USS classes, so they work in UXML and in code. ButtonStyle has a constant for each class.

#Button variants

A Button with no class has the surface color. A variant class changes its meaning:

<ui:Button text="Default" />
<ui:Button text="Save" class="tb-button--primary" />
<ui:Button text="Delete" class="tb-button--danger" />
<ui:Button text="Cancel" class="tb-button--outline" />
<ui:Button text="More" class="tb-button--ghost" />
<ui:Button text="Read the terms" class="tb-button--link" />

save.AddToClassList(ButtonStyle.PRIMARY_CLASS);

• Under the pointer, a primary or danger button becomes a little transparent. An outline or ghost button gets --tb-color-surface-hover. A link gets --tb-color-text.
• The focused button has a border: --tb-color-text on a primary or danger button, and --tb-color-accent on the others.
• A disabled primary or danger button keeps its color at half opacity. The others get --tb-color-text-disabled.
• Use one variant class on a button. Use one primary button in a dialog or a form.

#Button sizes

<ui:Button text="Small" class="tb-button--sm" />
<ui:Button text="Default" />
<ui:Button text="Large" class="tb-button--lg tb-button--primary" />
<ui:Button text="+" class="tb-button--icon" />
<ui:Button text="+" class="tb-button--icon tb-button--lg" />

A size class works with each variant class, and on a ToggleButton. For a picture, set iconImage of the button and leave the text empty.

#Loading state

ButtonStyle.SetLoading shows a button as busy. The button is disabled and shows a spinner in front of its text:

ButtonStyle.SetLoading(save, true);
await SaveAsync();
ButtonStyle.SetLoading(save, false);

• The end of the loading state enables the button. If the button was disabled for another reason, disable it again.
• Do not change text while the button loads. Change it after SetLoading(button, false).

#Button set

A container with the class tb-button-set joins its buttons in one frame. The frame has the border and the round corners, and a line shows between two buttons:

<ui:VisualElement class="tb-button-set">
    <ui:Button text="Left" />
    <ui:Button text="Center" />
    <ui:Button text="Right" />
</ui:VisualElement>

<ui:VisualElement class="tb-button-set tb-button-set--vertical">
    <ui:Button text="Top" />
    <ui:Button text="Bottom" />
</ui:VisualElement>

• The set has the margin and the height of one button, so it lines up with the buttons of its row.
• The set is as wide as its buttons. Put only buttons in it: Button, ToggleButton or a button with a variant class.
• The focused button shows its border in the set.
• A SplitButton is a button set with a main part and an arrow.
• The class tb-button-group is not a button set. It is the row of the window buttons in a title bar.

#ToggleButtonGroup

Unity's ToggleButtonGroup shows a row of buttons where one or more are on. In a workspace, the button that is on has the accent color:

<ui:ToggleButtonGroup label="View" name="view">
    <ui:Button text="List" />
    <ui:Button text="Icons" />
    <ui:Button text="Details" />
</ui:ToggleButtonGroup>

var view = root.Q<ToggleButtonGroup>("view");
view.RegisterValueChangedCallback(evt => ShowList(evt.newValue[0]));

For one button that is on or off, use a ToggleButton.

#MinMaxSlider

Unity's MinMaxSlider picks a range with two thumbs. In a workspace, the track and the thumbs match the Slider, and the range between the thumbs has the accent color:

<ui:MinMaxSlider label="Price" low-limit="0" high-limit="100" min-value="20" max-value="60" />

#GroupBox

Add the class tb-group-box to a Unity GroupBox for a border with the title on its top line:

<ui:GroupBox text="Audio" class="tb-group-box">
    <ui:Slider label="Music" low-value="0" high-value="100" />
    <ui:Slider label="Effects" low-value="0" high-value="100" />
</ui:GroupBox>

On a panel with another background, give the title the same background:

.my-panel .tb-group-box > .unity-group-box__label { background-color: var(--tb-color-surface-alt); }

For a group of form fields with the title inside the border, use the class tb-field-set of FormField.

#Change the look

Write the rule with .unity-button in front of the class, so it wins over the rule of the control library. Put the sheet after the theme sheet.

/* Round primary buttons */
.unity-button.tb-button--primary { border-radius: 12px; }

/* A wider large button */
.unity-button.tb-button--lg { padding-left: 24px; padding-right: 24px; }

/* The range of a MinMaxSlider in the success color */
.tb-workspace .unity-min-max-slider__dragger { background-color: var(--tb-color-success); }

For the rules of the other Unity controls, see Unity controls in the workspace.