react Architecture Docs
Home / File/ Button.js — react Source File

Button.js — react Source File

Architecture documentation for Button.js, a javascript file in the react codebase. 3 imports, 33 dependents.

File javascript BabelCompiler Validation 3 imports 33 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  eb0db260_ac17_83a5_e9e8_ca9380fbd949["Button.css"]
  f9049b08_60f8_abce_a6a6_153f88447124 --> eb0db260_ac17_83a5_e9e8_ca9380fbd949
  bb73063d_5d08_efb3_036e_72b78842d689["tooltip.js"]
  f9049b08_60f8_abce_a6a6_153f88447124 --> bb73063d_5d08_efb3_036e_72b78842d689
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  f9049b08_60f8_abce_a6a6_153f88447124 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  3bbe1444_b210_8ba4_4493_8fd51690fd1d["ActivitySlice.js"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> f9049b08_60f8_abce_a6a6_153f88447124
  5a801236_0190_8913_962e_81b4d9f36895["ExpandCollapseToggle.js"]
  5a801236_0190_8913_962e_81b4d9f36895 --> f9049b08_60f8_abce_a6a6_153f88447124
  4c0d725a_27bd_a723_3599_a3e75bea5bd3["InspectedElement.js"]
  4c0d725a_27bd_a723_3599_a3e75bea5bd3 --> f9049b08_60f8_abce_a6a6_153f88447124
  0b54b2a8_1c5a_d85b_7742_10a526b0dedd["InspectedElementContextTree.js"]
  0b54b2a8_1c5a_d85b_7742_10a526b0dedd --> f9049b08_60f8_abce_a6a6_153f88447124
  e489f60d_6c21_9c69_16d7_a97323c0790f["InspectedElementErrorsAndWarningsTree.js"]
  e489f60d_6c21_9c69_16d7_a97323c0790f --> f9049b08_60f8_abce_a6a6_153f88447124
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3["InspectedElementHooksTree.js"]
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3 --> f9049b08_60f8_abce_a6a6_153f88447124
  816abfef_4d5d_bc7e_fc00_1acadf628d28["InspectedElementPropsTree.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> f9049b08_60f8_abce_a6a6_153f88447124
  50c39210_7831_dde4_3a12_fc8ea644bc38["InspectedElementSourcePanel.js"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> f9049b08_60f8_abce_a6a6_153f88447124
  e495e7a2_ca5d_8be7_7ae7_0c5ccb871bc2["InspectedElementStateTree.js"]
  e495e7a2_ca5d_8be7_7ae7_0c5ccb871bc2 --> f9049b08_60f8_abce_a6a6_153f88447124
  72d570aa_3875_3688_0200_4617e04d04ed["InspectedElementSuspendedBy.js"]
  72d570aa_3875_3688_0200_4617e04d04ed --> f9049b08_60f8_abce_a6a6_153f88447124
  e1b4c141_a4b7_37b7_6892_efa866707492["InspectedElementViewSourceButton.js"]
  e1b4c141_a4b7_37b7_6892_efa866707492 --> f9049b08_60f8_abce_a6a6_153f88447124
  style f9049b08_60f8_abce_a6a6_153f88447124 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

import styles from './Button.css';
import Tooltip from './Components/reach-ui/tooltip';

type Props = {
  children: React$Node,
  className?: string,
  testName?: ?string,
  title: React$Node,
  ...
};

export default function Button({
  children,
  className = '',
  testName,
  title,
  ...rest
}: Props): React.Node {
  let button = (
    // $FlowFixMe[cannot-spread-inexact] unsafe spread
    <button
      className={`${styles.Button} ${className}`}
      data-testname={testName}
      {...rest}>
      <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
        {children}
      </span>
    </button>
  );

  if (title) {
    button = <Tooltip label={title}>{button}</Tooltip>;
  }

  return button;
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does Button.js do?
Button.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in Button.js?
Button.js defines 1 function(s): Button.
What does Button.js depend on?
Button.js imports 3 module(s): Button.css, react, tooltip.js.
What files import Button.js?
Button.js is imported by 33 file(s): ActivitySlice.js, ClearProfilingDataButton.js, ComponentsSettings.js, ErrorView.js, ExpandCollapseToggle.js, InspectedElement.js, InspectedElementContextTree.js, InspectedElementErrorsAndWarningsTree.js, and 25 more.
Where is Button.js in the architecture?
Button.js is located at packages/react-devtools-shared/src/devtools/views/Button.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free