Controls and UI Patterns

Controls and UI patterns help users interact with your extension and customize their experience.

We’ve provided examples of controls that are used in Tableau. Using the exact styling of these components is optional.

The controls described here use Tableau branding, accessible from the Color and Fonts sections of these design guidelines.

At this time, we are only able to provide surface-level usage and design specifications for controls. We are working to make code for Tableau controls accessible to developers in the future.


Activity Indicators

When performing an action, let users know that your extension is currently doing something and isn’t static or stalled. Make sure your extension acknowledges the user’s interactions by providing some form of tangible feedback.

An activity indicator appears when a task is performed that will take an unknown amount of time, such as loading or synchronizing complex data. It disappears when the task is complete.

activity spinner


These activity spinners used in Tableau run at one rotation per second, and are non-interactive.

Using this exact spinner in your extension is optional. For alternate options, we recommend using activity indicators of similar sizes and variety to ensure that it works on varying background elements.

Variations Preview SVG Code How to use
(50x50 px)
large gif SVG Use only on light backgrounds
Large with underlay
(65x65 px)
large with underlay gif SVG Use on light or complex backgrounds to provide better contrast
Large on dark background
(50x50 px)
large on dark background gif SVG Use only on dark backgrounds
Small on dark background
(14x14 px)
small on dark background gif SVG Use only on small elements with dark backgrounds
(14x14 px)
small gif SVG Use only on small elements with light backgrounds





A button communicates what happens when a user touches it. Button labels can consist of text, an icon, or a combination of both.



Button How to use
Call-to-Action                                                 These buttons are primarily used in dialogues to indicate an action. Use colors to communicate function–for example, green is commonly used for confirmation buttons. Learn more about color usage at Colors.

You may also want to utilize branding practices on buttons. Learn more at Branding your Extension.
Greyscale Greyscale buttons are used either to indicate a secondary action, or a button that has been disabled and a particular action needs to be taken before proceeding.
Text Button             This is a low-attention button, and should only be used to provide a secondary option in the case that the user wants to perform an action that isn’t the primary action.
Icon Buttons can have icons to add a helpful visual. If you use icons, include a text label or a help tag that is activated on hover.


Button Placement

Button placement guidelines apply to Call-to-Action and Greyscale buttons.

buttons placement


One Primary Button

Primary buttons apply only to Call-to-Action buttons.

buttons primary




button specs





A dialog is a “conversation” between the system and the user, which often requests information or action from the user. For info about the extension configuration dialog, learn more at Extension Components and Modes.

Standard Dialog

These dialogs are non-modal, meaning they can be used when the requested information is not essential to continue. The dialog can be left open while the user interacts with other components in the extension.

standard dialog


Tab Dialogs

If you’d like to have multiple sections to your dialogs, you may use tabs to separate content.

Top Tabs

Top tabs allow a dialog to contain several pages of content in one place. Use this variation to have 3 distinct sections of content. Do not exceed 3 top tabs.

top tabs labeled


Side Tabs

If you need more tabs in a dialog than the top tab system can accommodate, it is appropriate to utilize the side tab style of navigation. Use this tab variation if you need 3 or more sections of content. Do not exceed 5 side tabs.

side tabs labeled




Dialog content can vary widely, but consists of specific textual or UI elements that should meet some of the following standards.

Standard Dialog

standard dialog specs


Top Tab Dialog

top tab dialog specs

top tab header specs


Side Tab Dialog

side tab specs


Dialog Widths

Dialog height will vary based on content but width will fit into one of these standard sizes.

standard dialog widths




Dropdown controls allow multiple options to be expanded from a menu. Dropdowns have two main components: Control and Menu.

dropdowns cover



  How to use
Controls             Dropdown controls have an arrow on the right side, which indicates the control is actionable. This button is primarily used in dialogues to indicate an action.
Menu A dropdown menu contains a group of selections. When a menu item is selected, the dropdown control is updated to reflect the user’s new choice.


Control Variations

control variations

  How to use
Outline The outline style is the primary variation that should be used. It can be used by itself, on forms, or within dialogues.
(label optional)                
Line style dropdowns are useful in areas that have cramped vertical space. This dropdown style can be stacked within panels to avoid a boxy wireframe feel. While the label is optional, we encourage using it to better inform users about the category of items.
Text This style allows the user to access options from a dropdown or flyout menu. This style works well in tool and start bars, as well as in dialogs and menus.
Icon The icon style works best in small regions such as tool bars, and is great for switches that have several options.


menu variations

  How to use
Standard This is the primary dropdown menu style. If your dropdown menu has many items or needs more classification, consider implementing some of the other options pictured.
Nested Flyout If your menu needs more broad categories to choose specific items from, it can have a nested flyout menu.
Search Search can be added to dropdown menus. Use this variation if your menu may have many items in the list to allow users to easily search for a specific item.
Checkbox Checkboxes can be used for multi-select dropdowns.
Compound Compound menus allow for items to be grouped by separate types.


Stacking Dropdowns

Use the line style when stacking several dropdowns on top of each other to avoid a boxy wireframe look and feel.

stacking dropdowns

There is no space between the control and the menu. The minimum menu width is 40px, and the maximum is 260px. Menus can be wider than the control, but should not be narrower.

align control and menus




Design specifications are grouped by the type of control and their corresponding control states, then menu variations.


default controls+menu spec

line controls spec

icon control

menu and flyout spec

menu variations spec





Selectors are a broad family of controls within the interface. This family has been broken down into four categories: Pickers, Sliders, Steppers, and Toggles.




  How to use
Pickers Pickers enable users to make a selection from a list of options. Each picker has an icon control such as a checkbox or radio button.
Sliders Sliders enable users to adjust totals without inputs via the keyboard. They are a convenient choice for selecting a value when there are known maximum and minimum values.
Steppers Steppers enable users to click or tap on a control to change values. They often have a text input allowing the user to choose between keyboard input and mouse/tap input.
Toggles Toggles are the simplest picker. They enable users to choose one item, while one or more items are off.




pickers spec


sliders spec


steppers spec


toggle spec




Text Fields

Text fields are places in the user interface where users enter text or phrases, such as on a form or sign in page.

text fields cover



                                            How to use
Outline Text The outline style has a prominent appearance that can be used by itself, on forms, or within dialogues.
Line Text The line text field can be used for stacking multiple fields within a panel to avoid a boxy wireframe feel. Line style text fields are useful in areas that have extremely limited vertical space.
Search Search boxes allow users to search for terms, and appear at the top of a page or dialog.


Stacking Text Fields

Always use the line text field style in forms, or when fields are stacked.

text fields stacking




text field specs

search field





Ideally, your users should be able to figure out how to use your extension without needing a guide. But to help users understand more context to the task they’re performing, you may utilize tooltips.

In general, tooltips are general small boxes that contain information about the item. When the user places their cursor over an item without clicking it (hover), a tooltip may appear.

tooltips cover



Descriptive tooltips are always anchored to the element with which they are associated. Tooltips can help further describe controls without shifting the user’s attention away from the primary interface. You may want to put tooltips in some parts of your extension if you want to briefly explain the use of a particular control or section.


Tooltips should not cover other icons in the toolbar, or block related content.

tooltips placement


Include succinct copy that helps the user take their next step.

tooltips content



tooltips spec