# Sistema de componentes

## 🧩 O que são componentes

Os componentes são pequenas peças de lego que compõem nossas páginas e juntos dão acesso a diferentes ações. Nossas opções básicas incluem botões, cards, menus, títulos, entre outros.

Eles **representam um papel importante na interação entre o usuário e a solução criada** dentro de nossa plataforma, pois é por meio deles que serão realizadas as tarefas desejadas para o sucesso do seu produto.

{% hint style="info" %}
É importante mencionar que todos nossos componentes **são altamente customizáveis**, podendo ter seus estilos configurados a partir da área de temas - [apresentada no primeiro tópico básico](https://gstudioapp.gitbook.io/gstudio-docs/primeiro-vez-aqui#themes) - 
{% endhint %}

Para adicionar um componente, clique no <mark style="color:purple;">ícone +</mark> **(A)** ao lado do respectivo container:

![Adicionando um componente](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FS6yyj09YAmVywA4Eam3z%2Fimage.png?alt=media\&token=823f18ea-9898-488c-85ca-806f5ddecc86)

E dentro da janela aberta **(B)** escolha a opção desejada:

![Opções de componentes](https://codahosted.io/docs/RoXX6QyEJl/blobs/bl-9rXXjJfcn8/5fe5d74a57055509ca0f8462cd4c7c995033b3b02a11352d481208bc82e62348272d9bdffc208b6cfcf3d5be93c21c03fe7b6b4f278935e775e4a040c5acc3ffc0465b2c4c3248f94f41e315fa5a56386149b599d08d0a7252e7e9af6b9d7c77037ce942)

{% hint style="warning" %}
Vale ressaltar que para ordenar os componentes da maneira desejada, o respectivo [container deve estar configurado](https://gstudioapp.gitbook.io/gstudio-docs/conheca-nosso-editor#containers) com as propriedades de alinhamento e distribuição.
{% endhint %}

## 👓 Tipos de componentes

Os **componentes padrões** são aqueles mais simples e exigem pouca configuração, como por exemplo um botão o qual a única configuração é uma ação.

Exemplo de componente padrão:

![Exemplo de componente padrão](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FctVhxzwMxcN8LS2SD4lX%2Fimage.png?alt=media\&token=8039acfb-d016-4d7f-9682-08c6d46c6507)

Já os **data components** requerem o entendimento sobre como configurar e relacionar os dados dentro de nossa plataforma - assunto que abordaremos no próximo tópico.

Exemplo de data component:&#x20;

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FYM7JuflurmVkiOcJPBKs%2Fimage.png?alt=media\&token=e25969a0-ff4a-438a-8b1d-80596e1f32fc)

Em sua configuração, podemos notar que existe a opção sobre qual **coleção de dados** será a base desse respectivo componente. Em nosso próximo tópico abordaremos mais sobre esse assunto.