chrome-devtools-frontend/front_end/ui/components/docs/icon_button/basic.ts

Chrome DevTools UI

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import * as IconButton from '../../icon_button/icon_button.js';

function appendComponent(data: IconButton.IconButton.IconButtonData) {
  const component = new IconButton.IconButton.IconButton();
  component.data = data;
  document.getElementById('container')?.appendChild(component);
}

appendComponent({
  clickHandler: () => {},
  groups: [{iconName: 'review', iconColor: 'var(--icon-default)', text: '1 item'}],
});

appendComponent({
  clickHandler: () => {},
  groups: [
    {iconName: 'review', iconColor: 'var(--icon-primary)', text: 'Test'},
    {iconName: 'warning-filled', iconColor: '', text: '1'},
  ],
});

appendComponent({
  clickHandler: () => {},
  groups: [
    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23', iconHeight: '2ex', iconWidth: '2ex'},
    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
  ],
});

appendComponent({
  groups: [
    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
  ],
});

appendComponent({
  clickHandler: () => {},
  groups: [
    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
  ],
  trailingText: 'Issues',
});

appendComponent({
  clickHandler: () => {},
  groups: [
    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
  ],
  leadingText: 'Issues:',
});

appendComponent({
  clickHandler: () => {},
  groups: [
    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
  ],
  leadingText: 'Issues:',
  compact: true,
});