ButtonBuilder

ButtonBuilder creates Discord button components for use inside ActionRowBuilder.

Import

TypeScript

import { ButtonBuilder, ButtonStyle } from "lunibee";

JavaScript

import { ButtonBuilder, ButtonStyle } from "lunibee";

Methods

All methods return this for chaining.

setCustomId(id)

Sets the custom ID for interactive buttons (required for non-link buttons).

TypeScript

button.setCustomId("confirm_action");

JavaScript

button.setCustomId("confirm_action");

setLabel(label)

Sets the button label text (max 80 characters).

TypeScript

button.setLabel("Confirm");

JavaScript

button.setLabel("Confirm");

setStyle(style)

Sets the button style. Use the ButtonStyle enum:

Constant	Value	Appearance
ButtonStyle.Primary	1	Blue
ButtonStyle.Secondary	2	Gray
ButtonStyle.Success	3	Green
ButtonStyle.Danger	4	Red
ButtonStyle.Link	5	URL link (gray, opens in browser)

TypeScript

button.setStyle(ButtonStyle.Danger);

JavaScript

button.setStyle(ButtonStyle.Danger);

setURL(url)

Sets the URL for link buttons (ButtonStyle.Link). Link buttons cannot have a customId.

TypeScript

button.setStyle(ButtonStyle.Link).setURL("https://lunibee.js.org");

JavaScript

button.setStyle(ButtonStyle.Link).setURL("https://lunibee.js.org");

setEmoji(emoji)

Adds an emoji to the button.

TypeScript

button.setEmoji("🚀");
button.setEmoji({ id: "123456789", name: "lunibee" });

JavaScript

button.setEmoji("🚀");
button.setEmoji({ id: "123456789", name: "lunibee" });

setDisabled(disabled?)

Disables or enables the button.

TypeScript

button.setDisabled(true);

JavaScript

button.setDisabled(true);

toJSON()

Serializes to a raw Discord component object.

Examples

Confirmation flow with two buttons

TypeScript

import { ActionRowBuilder, ButtonBuilder, ButtonStyle } from "lunibee";

const row = new ActionRowBuilder<ButtonBuilder>().addComponents(
  new ButtonBuilder()
    .setCustomId("confirm")
    .setLabel("Confirm")
    .setStyle(ButtonStyle.Success)
    .setEmoji("✅"),
  new ButtonBuilder()
    .setCustomId("cancel")
    .setLabel("Cancel")
    .setStyle(ButtonStyle.Danger)
    .setEmoji("❌"),
);

await channel.send({ content: "Are you sure?", components: [row] });

// Handle the button click:
client.on("interactionCreate", async (interaction) => {
  if (!interaction.isComponent()) return;
  if (interaction.customId === "confirm") {
    await interaction.update({ content: "✅ Confirmed!", components: [] });
  } else if (interaction.customId === "cancel") {
    await interaction.update({ content: "❌ Cancelled.", components: [] });
  }
});

JavaScript

import { ActionRowBuilder, ButtonBuilder, ButtonStyle } from "lunibee";

const row = new ActionRowBuilder().addComponents(
  new ButtonBuilder()
    .setCustomId("confirm")
    .setLabel("Confirm")
    .setStyle(ButtonStyle.Success)
    .setEmoji("✅"),
  new ButtonBuilder()
    .setCustomId("cancel")
    .setLabel("Cancel")
    .setStyle(ButtonStyle.Danger)
    .setEmoji("❌"),
);

await channel.send({ content: "Are you sure?", components: [row] });

// Handle the button click:
client.on("interactionCreate", async (interaction) => {
  if (!interaction.isComponent()) return;
  if (interaction.customId === "confirm") {
    await interaction.update({ content: "✅ Confirmed!", components: [] });
  } else if (interaction.customId === "cancel") {
    await interaction.update({ content: "❌ Cancelled.", components: [] });
  }
});

Documentation link button

TypeScript

const docsRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
  new ButtonBuilder()
    .setLabel("View Docs")
    .setStyle(ButtonStyle.Link)
    .setURL("https://lunibee.js.org")
    .setEmoji("📚"),
);
await channel.send({ content: "Need help?", components: [docsRow] });

JavaScript

const docsRow = new ActionRowBuilder().addComponents(
  new ButtonBuilder()
    .setLabel("View Docs")
    .setStyle(ButtonStyle.Link)
    .setURL("https://lunibee.js.org")
    .setEmoji("📚"),
);
await channel.send({ content: "Need help?", components: [docsRow] });