Components

Buttons

Variations

Primary buttons

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

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 buttons are the default button style. Use them for regular actions in the UI or to cancel dialogs.

Text buttons

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

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

Usage

Developer guidelines

Dos and Don'ts

Do

• Use devtools-button for Primary, Outlined, Text, Micro and Icon buttons
• Use ToolbarButton for buttons inside Toolbars. Underneath they make use of devtools-button.

Don't

• Use <button>, as they are not styled correctly
• Change the default color of icons (only in exceptions)

Developer examples

Primary button

Usage with lit-html:

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

Usage with the imperative API:

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', event => onClick(event));

Design guidelines

Dos and Don'ts

Primary Buttons

Tonal buttons

Outlined buttons

Text buttons

Icon buttons

Resources

For developers

Implementation

• devtools-button

For designers

Figma

• Buttons
• Icon buttons

Combo Boxes and Single Select menus

Usage

Developer guidelines

Dos and Don'ts

Do

• Use <select> with <option> and <optgroup> if necessary, together with core styles.
• Override inherited width with CSS if necessary.

Don't

• Override the default colors.
• Introduce custom select components.

Developer examples

Usage with lit-html:

html`<select aria-label="Choose your champion"
             @onchange=${onChange}>
  <option hidden value="Choose your champion"></option>
  <option jslog=${VisualLogging.item('hamster').track({click: true})}
          value="Hamster">Hamster</option>
  <option jslog=${VisualLogging.item('mouse').track({click: true})}
          value="Mouse">Mouse</option>
  <option jslog=${VisualLogging.item('cat').track({click: true})}
          value="Cat">Cat</option>
</select>`

Usage with the imperative API:

const select = UI.UIUtils.createSelect('Choose your champion', [
  'Hamster',
  'Mouse',
  'Cat',
]);
select.addEventListener('change', event => onChange(event))

Radio Buttons

Usage

Developer guidelines

Dos and Don'ts

Do

• Use <input type="radio"> nested within a <label> for radio buttons, together with core styles.

Don't

• Override the default colors.

Developer examples

Usage with lit-html:

const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext);
html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>`

Usage with the imperative API:

const {label, radio} = UI.UIUtils.createRadioButton(name, title, jslogContext);
radio.addEventListener('change', event => onChange(event))

Sliders

Usage

Developer guidelines

Dos and Don'ts

Do

• Use <input type="range"> for sliders, together with core styles.

Don't

• Override the default colors.

Developer examples

Usage with lit-html:

html`<input type="range"
            min=${min}
            max=${max}
            tabindex=${tabIndex}
            @change=${onChange}>`

Usage with the imperative API:

const slider = UI.UIUtils.createSlider(min, max, tabIndex);
slider.addEventListener('change', event => onChange(event))

Icons

Usage

Designer guidelines

Find an exhaustive collection of icons currently used in DevTools here

Developer guidelines

Dos and Don'ts

Do

• Set class and change color and / or size in .css files

Don't

• Use icons as buttons
• Use Icon constructor and data setter (deprecated)
• Use inline styles e.g. js icon.style.color = ‘some-color’

Developer examples

Usage with lit-html:

html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`

Usage with the imperative API:

const someIcon = IconButton.Icon.create('some-icon-name', 'some-class');