> For the complete documentation index, see [llms.txt](https://camposcodes.gitbook.io/easediscordjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://camposcodes.gitbook.io/easediscordjs/integrations/components/button.md).

# Button

Here's an example of code creating four types of buttons within the same line:

```javascript
import { ApplicationCommandType } from "discord.js";
import { CreateRow, CreateButton } from "ease-discord-js";

export default {
    name: "test",
    description: "command to test the library",
    type: ApplicationCommandType.ChatInput,

    run: async(client, interaction) => {
       return interaction.reply({content: "Hello World!", components: [
            new CreateRow([
                new CreateButton({customId: "1", label: "Primary", style: "Primary"}),
                new CreateButton({customId: "2", label: "Secondary", style: "Secondary"}),
                new CreateButton({customId: "3", label: "Danger", style: "Danger"}),
                new CreateButton({customId: "4", label: "Primary Disabled", style: "Primary", disabled: true}),
            ])
        ]});
    }
}
```

The result of this code is this:

<figure><img src="https://cdn.discordapp.com/attachments/1225958170732793898/1238309827713826987/image.png?ex=663f7a25&#x26;is=663e28a5&#x26;hm=a68421c1d5e6676b22cfa610d1cd325a00fedbfbe08f5f996a40d503411ffb35&#x26;" alt=""><figcaption><p>Forma simples de como criar um botão, mostrando todos estilos disponíveis</p></figcaption></figure>