> For the complete documentation index, see [llms.txt](https://tokenomy.gitbook.io/boilerplate-code/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tokenomy.gitbook.io/boilerplate-code/features/components/global.md).

# Global

Place to create local, reusable and global components within the application project.

## Overview

Identify reusable components (global), Before splitting components, identify which components are likely to be reused across multiple pages of your application. These components can be placed in a separate directory and then imported into the respective pages.

## How to use

If you are going to create a global component that applies only to the project then you can use this method. 

### Step 1: Create a component

The first step you have to create a component folder in `src/components/global`. With the file structure as below.

```
Button
├── index.tsx
└── style.ts
```

### Step 2: Component code

`index.tsx` used to place the root function component in which there are props and rendering elements.

```tsx
// Vendors
import React, { ButtonHTMLAttributes } from 'react';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  text: string;
  color?: 'primary' | 'secondary';
}

const Button = ({ text, color = 'primary', ...rest }: ButtonProps) => {
  const classes = `button button-${color}`;

  return (
    <button className={classes} {...rest}>
      {text}
    </button>
  );
};

export default Button;
```

### Step 3: Import component

We use aliases for component usage, code as shown below. You can check aliases configs in `tsconfig.json`

```tsx
import Button from '@/components/global/Button';
```