This documentation is for the latter, if your case fits the former better, please look at Product Button instead.

All tool buttons must follow the following rules:

1 fixed button in a row

2 fixed buttons in a row

3 fixed buttons in a row

4 fixed buttons in a row

Without icon

Note that all sizes used below are for reference only, and are not prescriptive.

Flexible width per buttons in a row

The padding and margins are exactly the same as in the previous section, but as you can see, the buttons no longer share the same size. At first glance, the pixel widths of each button seems arbitrary, but if we overlay the toolbox's columns over the previous example, you can see that it follows the column grid:

As you can see, buttons must occupy a whole number of columns, and must begin and end inside a column. Buttons cannot start or end while in the gutter in between columns.

All tool button sizes can vary per row within a section as long as it uses 6px inner padding and the fit to grid rules.

Unlike product buttons, tool buttons are not allowed to flow text onto the next line, and must truncate immediately.

Icon with long label

No icon with long label

While we don't generally have any restriction regarding when to use an icon, there are a few exceptions for Settings and Import/Export/Convert buttons. This can help reduce cognitive load, as users can quickly identify functionality through familiar visual cues.

Any tool button that represents some sort of setting or configuration window must use the gear icon.

Examples:

Any tool button that represents an import or export or convert action must not use an icon.

Examples: