Controls and Views

The system offers a range of standard controls that are designed for use in the app region of the Touch Bar. Use these controls whenever possible for maximum consistency.


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

Screenshot of a Touch Bar in which a compose button is highlighted.

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

Keep titles short. Overly long titles can crowd the Touch Bar.

Make tasteful bezel color changes. The system-provided bezel is designed to have an appearance similar to physical keyboard buttons. If your app requires a custom bezel color, darker colors are recommended.

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


When tapped, a toggle switches between on and off states.

Let the background indicate the 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 displays the word quick and two candidate completions, which are quickest and quickness.

For developer guidance, see NSCandidateListTouchBarItem.

Character Pickers

When tapped, 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 field or text view on the main screen.

For developer guidance, see NSCandidateListTouchBarItem.

Color Pickers

When tapped, a color picker opens a popover that includes controls for selecting a color. A color picker can be configured to display a color picker icon, a stroke color picker icon, or a text color picker icon. Regardless of the icon used, all color pickers display the same popover.

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.


A label displays read-only text, usually to describe 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 enough on its own, consider including a short title within the control to provide context.

Screenshot of a Touch Bar in which two buttons are called out. One button displays a clock icon and uses the title "add time." The other button displays a paper airplane icon and uses the title "add location."

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


In a collapsed state, a popover appears as a single button in the Touch Bar.

When expanded, 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 an exit button to return to the collapsed state and the previous set of controls.

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

A popover expanded by touch-and-hold can present the same overlay it presents when tapped, or a completely different overlay. In a touch-and-hold overlay, people can press and slide a finger to a control to make a selection and lift the finger to collapse the popover.

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. Touch and hold is intended primarily for displaying 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 denote 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.


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 the finger become highlighted. Depending on the scrubber’s configuration, a selection is made as the finger moves from item to item, or when people lift their finger. 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.

Free Scrubbers

A free scrubber presents content in a freely scrollable list, such as a list of Calendar dates, that people swipe to scroll. Depending on the scrubber’s configuration, a single item becomes selected when the item resides at a specific location such as in the center of the scrubber, or when the scrubber is stationary and people tap the item.

Use predictable and logically ordered values. Many values in a free scrubber may be hidden when the scrollable list is stationary. It's best when people can predict what these values are, such as with a list of alphabetized countries, so they can move through the list quickly.

Avoid displaying large value lists. Long lists can be tedious to navigate 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 the keyboard or trackpad can be used 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.

Screenshot of a Touch Bar highlighted to focus on a text justification segmented control that contains four segments.

Limit the number of segments to improve usability. Wider segments are easier 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 all segments have equal width, it doesn’t look great if content fills some segments but not others.

Keep titles short. Overly long titles can crowd the Touch Bar.

Prefer darker colors for bezel color changes. The system-provided bezel is designed to have an appearance similar to physical keyboard buttons. If your app requires a custom bezel color, darker 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 tapped, a sharing service picker displays a popover that contains sharing buttons.

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.


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.

Screenshot of a Touch Bar highlighted to show a slider. The track of the slider is blue and the slider thumb is a solid white rounded rectangle.

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.

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 let people choose a value from a set of continuous — usually numeric — values. 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.

Screenshot of a Touch Bar, highlighted to show a font-size stepper with a current value of 12 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 make sure that people can understand the images well enough to predict the values that are before and after 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.