Skip to main content

Documentation Index

Fetch the complete documentation index at: https://djs-core.cleboost.com/llms.txt

Use this file to discover all available pages before exploring further.

Buttons are interactive components that users can click to trigger actions in your Discord bot.
Buttons are automatically registered when placed in src/components/buttons/. The customId is generated from the file path, so you don’t need to set it manually.

​
Creating a Button

Buttons in djs-core are created using the Button class.
[src/components/buttons/my-button.ts]
import { Button } from "@djs-core/runtime";
import { ButtonStyle } from "discord.js";

export default new Button()
  .setLabel("Click me!")
  .setStyle(ButtonStyle.Primary)
  .setCustomId("my-button")
  .run(async (interaction) => {
    await interaction.reply("Button clicked!");
  });

​
Button Styles

Discord provides several button styles:
  • ButtonStyle.Primary (Blurple)
  • ButtonStyle.Secondary (Gray)
  • ButtonStyle.Success (Green)
  • ButtonStyle.Danger (Red)
  • ButtonStyle.Link (Gray with external link icon)

​
Using Buttons in Commands

To use a button, import it and add it to an ActionRowBuilder. 
import { Command, Button } from "@djs-core/runtime";
import { ActionRowBuilder } from "discord.js";
import myButton from "../../components/buttons/my-button";

export default new Command()
  .setDescription("Show a button")
  .run(async (interaction) => {
    const row = new ActionRowBuilder<Button>().addComponents(myButton);

    await interaction.reply({
      content: "Click the button below!",
      components: [row],
    });
  });

​
Passing Data to Buttons

djs-core allows you to pass typed data to your buttons using the .setData() method.

​
1. Define Button with Data Type

[src/components/buttons/confirm.ts]
import { Button } from "@djs-core/runtime";
import { ButtonStyle } from "discord.js";

export default new Button<{ userId: string; action: string }>()
  .setLabel("Confirm")
  .setStyle(ButtonStyle.Success)
  .setCustomId("confirm-button")
  .run(async (interaction, data) => {
    await interaction.reply(`Processing ${data.action} for user ${data.userId}`);
  });

​
2. Set Data when Using the Button

import confirmButton from "../../components/buttons/confirm";

// ... in your command run()
const row = new ActionRowBuilder<Button>().addComponents(
  confirmButton.setData({ userId: interaction.user.id, action: "delete" })
);

​
Data Time-to-Live (TTL)

You can optionally specify a TTL in seconds for the data storage: 
confirmButton.setData({ userId: "123" }, 60) // Expires in 60 seconds
Link buttons navigate to external URLs and don’t trigger interaction events.
[src/components/buttons/website-link.ts]
import { Button } from "@djs-core/runtime";
import { ButtonStyle } from "discord.js";

export default new Button()
  .setLabel("Visit Website")
  .setStyle(ButtonStyle.Link)
  .setURL("https://example.com");