Chromium DevTools UX Style Guide

Components

Buttons

Button component

Variations

Primary buttons

Primary button component

Primary buttons are the most prominent type of button available. They are used for a single, necessary action a developer must complete, or for a highly recommended, promoted action. Use them sparingly and with purpose.

Tonal buttons

Tonal button component

Use tonal buttons in dialogs for actions that stand secondary to a primary action and are not a cancel or close action.

Outlined buttons

Outlined button component

Outlined buttons are the default button style. Use them for regular actions in the UI or to cancel dialogs.

Text buttons

Text button component

Text buttons are the least prominent button choice. Use them in cases outlined buttons would create too much visual noise.

Micro buttons

Micro buttons are used if we have a small line height.

Icon buttons

Icon button variations

Use icon buttons in toolbars of contextual actions that shouldn’t take up much space.

Usage

Developer guidelines

Dos and Don'ts
Do
Don'ts
  • Use <button>, as they are not styled correctly
  • Change the default color of icons (only in exceptions)
Developer examples
Primary button

Usage within HTML environment:

<devtools-button
      class="some-class"
      .variant=${Buttons.Button.Variant.PRIMARY}
                 .title=${i18nString(UIStrings.someString)}
      .jslogContext=${'some-context')
      @click=${handleClick()}
      )></devtools-button>

Usage within Typescript environment (mostly when working with legacy code):

  const button = new Buttons.Button.Button();
  button.data = {
      variant: Buttons.Button.Variant.PRIMARY,
      title: i18nString(UIStrings.someString),
      jslogContext: 'some-context',
    };
  button.classList.add(‘some-class’);
  button.addEventListener(‘click’, () => handleClick());

Design guidelines

Dos and Don'ts
Primary Buttons

Primary Buttons

Tonal buttons

Tonal Buttons

Outlined buttons

Outlined Buttons

Text buttons

Text Buttons

Icon buttons

Icon Buttons

Resources

For developers

Implementation

For designers

Figma