# Making Components

Components provide a way to encapsulate logic and layouts. Additionally, they provide a way to keep code organized and reusable. In masonite-view-components we have two kinds of components. 

1. Anonymous Components
2. Class-based Components

### Class-based Components

To create a class-based component, you can use the following command. <mark style="color:red;">`python craft mv-component:make`</mark> <mark style="color:red;"></mark><mark style="color:red;">.</mark> The command takes one argument which is the name of the component. To illustrate we will create a trivial Button component.

```
python craft mv-component:make Button
```

Running the command creates two files within your component's directory. The files are stored as <mark style="color:red;">`templates/components/Button.py`</mark> & <mark style="color:red;">`templates/components/Button.html`</mark>. By default, the components directory is <mark style="color:red;">`templates/components`</mark>. This behavior can be changed but that will be discussed later.&#x20;

### Anonymous Components

Anonymous components are simple html files within the component's directory. Anonymous components have no matching python class files.

### Subdirectory

Components can also be created within subdirectories. Here you can keep all component logic tied together. To create our Button component in its own folder structure, run the following command.&#x20;

```
python craft mv-component:make Button -s
```

or

```
python craft mv-component:make Button -sidecar
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bayside.gitbook.io/mv-components/essentials/making-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.