Controls and Views

The system offers a range of standard controls you can provide in the app region of the Touch Bar. For consistency, use these controls when possible.

Buttons

Buttons initiate app-specific actions, and can include an icon and a title.

Partial screenshot of a Touch Bar in which a file button is highlighted.

Prefer icons over titles. Strive to design clear icons that stand on their own without supporting text.

Keep titles short. Lengthy titles can crowd the Touch Bar.

Customize a button's bezel color if necessary. The system-provided button bezel looks similar to the physical keyboard buttons and contributes to a unified visual experience. If your app requires a custom bezel color, consider using a dark color, which tends to look good in the Touch Bar.

For guidance, see Push Buttons. For developer guidance, see NSButton.

Toggles

A toggle switches between on and off states.

Partial screenshot of a Touch Bar that highlights a toggle button in the on state.

On

Partial screenshot of a Touch Bar that highlights a toggle button in the off state.

Off

Let the background indicate a toggle's state. The system automatically changes the background appearance of buttons in an off state, so there’s no need to indicate the state using color, text, or a different icon.

Use toggles in place of checkboxes and radio buttons. If you need a control that lets people choose between two states, use a toggle button.

For developer guidance, see the state property of NSButton.

Candidate Lists

A candidate list offers autocompletion suggestions during text entry. People can tap a suggestion to accept and insert it into the active text field or text view on the main screen. People can also expand or collapse a candidate list. An expanded candidate list replaces other controls that reside within the expansion area.

Screenshot of a Touch Bar that suggests the terms quick, quickly, and Quick in a candidate list.

For developer guidance, see NSCandidateListTouchBarItem.

Character Pickers

A character picker opens a popover that includes a list of special characters, such as emoji. People can tap a character in the picker to insert it into the active text area on the main screen.

Partial screenshot of a Touch Bar that highlights a character picker that's collapsed.

Closed

Partial screenshot of a Touch Bar that highlights a character picker that's expanded.

Open

For developer guidance, see NSCandidateListTouchBarItem.

Color Pickers

A color picker opens a popover that includes controls for selecting a color. You can configure a color picker to display an icon for a color picker, a stroke color picker, or a text color picker. Regardless of the icon, all color pickers display the same popover.

Partial screenshot of a Touch Bar that highlights a color picker and a stroke color picker, both of which are collapsed.

Closed

Screenshot of a Touch Bar that highlights a color picker that's expanded.

Open

Use icons as intended. Use the stroke color picker icon for selecting a stroke color. Use the text color picker icon for selecting a text color. For other color selection scenarios, use the color picker icon.

For developer guidance, see NSColorPickerTouchBarItem.

Labels

A label displays read-only text that doesn't appear within a control.

In general, avoid labels. Although the Touch Bar can display labels, it's generally best to avoid them because they’re not interactive. Instead, focus on designing meaningful icons for your controls. If you must include a label, keep it as short as possible.

Prefer titles over labels when supplementing complex icons. If the meaning of a control’s icon isn’t clear on its own, consider including a short title within the control to provide context.

Partial screenshot of a Touch Bar in which two buttons are called out. One button displays a pin icon and uses the title "Location." The other button displays a calendar icon and uses the title "Time."

For guidance, see Labels. For developer guidance, see NSTextField.

Popovers

A closed popover looks like a single button in the Touch Bar.

Partial screenshot of a Touch Bar that highlights a closed popover for viewing items in columns.

Closed

Screenshot of a Touch Bar that highlights an open popover that contains buttons for sorting options.

Open

When it's open, the popover replaces the current set of controls in the app region with a modal overlay containing a transient set of controls. In this modal overlay, people make a selection or tap a close button to return to the collapsed state and the previous set of controls.

TIP In Touch Bar (2nd generation), the popover’s close button appears within the app region; in Touch Bar (1st generation), the close button replaces the system button. The second generation Touch Bar decreases the space available for popovers by 64 points and the system may display controls closer together to avoid clipping controls.

Collapsed popovers open when people tap them. Optionally, popovers can also open in response to a touch and hold gesture. Popovers that support touch and hold include a trailing carat decoration.

Partial screenshot of a Touch Bar that highlights a closed popover for viewing items in columns.

Closed

Screenshot of a Touch Bar that highlights an open popover that contains buttons for sorting options.

Open

A popover can present the same overlay regardless of the gesture people use to expand it, or it can present a different overlay for each gesture. In a touch and hold overlay, people make a selection by sliding their holding finger to a control, and collapse the popover by lifting their finger.

Use popovers sparingly. Most controls in the Touch Bar should perform an action with a single tap.

Avoid nesting popovers. In general, people should rarely need to navigate more than one level in the Touch Bar.

Reserve touch and hold for simple popovers. Use touch and hold primarily to display an overlay that includes a simple set of options — such as a single segmented control — from which people can make a selection.

Indicate choice selection in a collapsed popover. When an expanded popover includes a list of options, the collapsed state should show the currently selected option.

Provide an obvious exit path. Make sure people always know how to collapse a popover and return to the previous set of controls.

For developer guidance, see NSPopoverTouchBarItem.

Scrubbers

A scrubber lets people swipe left and right to navigate through content like a list of dates or a group of photos. Scrubbers can be fixed or free, and are highly customizable — but should retain an appearance that doesn’t feel out of place in the Touch Bar.

For developer guidance, see NSScrubber.

Fixed Scrubbers

A fixed scrubber allows for fluid, continuous interaction with a set of arranged content, such as open Safari tabs. As people swipe across the scrubber, items beneath their finger become highlighted. Depending on the scrubber’s configuration, people make a selection by moving a finger to the item, or by lifting their finger from the scrubber. If the amount of content exceeds the size of a fixed scrubber, the scrubber automatically scrolls to reveal additional items as the finger nears the edge of the control. In a fixed scrubber, people use a finger to move the selection, rather than the content.

Screenshot of a Touch Bar that highlights a fixed scrubber. The six items in the scrubber are six different Safari pages. The third item from the left is selected.

Free Scrubbers

A free scrubber presents content in a scrollable list — such as a list of Calendar dates — that people swipe to scroll. Depending on the scrubber’s configuration, people select an item by moving it to a specific location, like the center of the scrubber, or by tapping the item while the scrubber is stationary.

Use predictable and logically ordered values. When the scrollable list in a free scrubber is stationary, some values may be hidden. If the list displays items in a logical order that follows an obvious progression, people can predict the hidden values and move through the list quickly. When viewing a list of country names, for example, people are generally better at predicting hidden values in an alphabetized list than in a list ordered by population size.

Keep lists of values as short as possible. People can find it tedious to navigate long lists in the Touch Bar. If you have a large list of values, consider presenting it on the main screen instead of the Touch Bar, so people can use the keyboard or trackpad for navigation.

Segmented Controls

A segmented control is a linear set of two or more segments, each of which functions as a button — usually configured as a toggle. Within the control, all segments are equal in width. Like buttons, segments can contain text and icons.

Partial screenshot of a Touch Bar that highlights a text justification segmented control that contains four segments.

Limit the number of segments to improve usability. Wider segments are easier for people to tap.

Prefer icons over titles. Strive to design clear icons that stand on their own without requiring supporting text.

Try to keep segment content size consistent. Because segments match in width, it's visually coherent if the content in the segments is also equal in length.

Keep titles short. Lengthy titles can crowd the Touch Bar.

Prefer darker colors for bezel color changes. The appearance of the system-provided bezel resembles physical keyboard buttons. If your app requires a custom bezel color, dark colors are recommended.

For developer guidance, see NSSegmentedControl.

Sharing Service Pickers

People use sharing service pickers to share text, images, and other content with apps, social media accounts, and other services. When people tap a sharing service picker, it displays a popover that contains sharing buttons.

Partial screenshot of a Touch Bar that highlights a sharing service picker in a closed state.

Closed

Partial screenshot of a Touch Bar that highlights a sharing service picker in an open state.

Open

Enable a sharing service picker only when there’s content to share. If people haven't selected text, images, or other sharable content, the sharing service picker should be disabled.

For developer guidance, see NSSharingServicePicker.

Sliders

A slider is a horizontal track with a control called a thumb, which people can slide to move between a minimum and maximum value, such as screen brightness level, or position during media playback. As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color.

Partial screenshot of a Touch Bar that highlights a sharing service picker in an open state.

Customize a slider’s appearance to match your app and add value. Consider coordinating a slider’s track color with your app’s color scheme.

Consider using a stepper instead of a slider when space is tight. If a slider’s values cover a limited range and it’s possible to move through them in discrete steps, it might make sense to use a stepper. For guidance, see Steppers.

Provide left and right icons that illustrate the meaning of the minimum and maximum values. A slider that adjusts image size, for example, could show a small image icon on the left and a large image icon on the right.

For developer guidance, see NSSlider.

Steppers

Steppers provide a set of continuous — usually numeric — values from which people can choose. A stepper displays the current value centered between a decrementing control and an incrementing control. People tap the controls or swipe the current value left or right to change the value by an amount you specify.

Partial screenshot of a Touch Bar that highlights a font-size stepper with a current value of 22 points.

Display the item's current value in the center view. By default, a stepper uses text to display the current value. You can use a formatter to style the text — for example, in a stepper that lets people choose dates, you might make today's date red. In some cases, it might make sense to use images instead of text, but it can be tricky to create images that convey a logical progression from which people can predict the values that precede and follow the current value. For example, a stepper that controls the line weight of a marking tool could use a set of images that vary in thickness to help people understand the effect of incrementing and decrementing the value.

Avoid using a stepper when people are likely to make large adjustments to an item's value. Because a stepper changes an item's value by one discrete step per swipe or tap, people would have to swipe or tap a lot to make a large value change.