Buttons

The Buttons class builds one or more discord.js action rows of buttons from a plain array. It handles button styles, link buttons, premium (SKU) buttons, and wraps buttons into new rows automatically.

JavaScript

const { Buttons } = require("syntx.js");

Creating buttons

JavaScript

const buttons = new Buttons([
  { id: "confirm", label: "Confirm", style: "Success" },
  { id: "cancel", label: "Cancel", style: "Danger" },
]);

Button definition

Field	Type	Required	Default	Description
`style`	`string \| number`	No	`"Primary"`	`"Primary"`, `"Secondary"`, `"Success"`, `"Danger"`, `"Link"`, `"Premium"`, or a raw `ButtonStyle` number.
`id`	`string`	Yes, unless `style` is Link/Premium	—	The `customId`, read back in `client.interaction()`.
`url`	`string`	Yes, for Link buttons	—	The destination URL.
`sku`	`string`	Yes, for Premium buttons	—	The SKU id Discord should sell.
`label`	`string`	No	—	The button's text.
`emoji`	`string`	No	—	An emoji shown on the button.
`disabled`	`boolean`	No	`false`	Greys out the button.
`row`	`boolean`	No	`false`	Forces this button to start a new row.

JavaScript

new Buttons([
  { id: "ok", label: "OK", style: "Primary", emoji: "✅" },
]);

Note

Providing sku automatically makes a button Premium, even without setting style: "Premium" explicitly. Premium buttons ignore label and emoji; Discord renders them on its own.

Automatic row layout

Buttons fill rows left to right, up to 5 per row, then automatically wrap into a new row. Set row: true on a button to force it onto a new row, even if the current one isn't full yet.

JavaScript

const buttons = new Buttons([
  { id: "a", label: "A" },
  { id: "b", label: "B" },
  { id: "c", label: "C", row: true }, // starts row 2, even though row 1 has space
]);

Warning

A message can only have up to 5 action rows of buttons. If your buttons would need a 6th row, new Buttons(...) throws a SyntxError immediately.

Link buttons

Link buttons open a URL directly; Discord never sends your bot an interaction for them, so they don't need an id.

JavaScript

new Buttons([
  { style: "Link", label: "Documentation", url: "https://example.com/docs" },
]);

Premium (SKU) buttons

JavaScript

new Buttons([
  { style: "Premium", sku: "1234567890123456" },
]);

Tip

Mix regular, link, and premium buttons freely in the same Buttons array; each one is resolved independently based on its own style/url/sku.

`build()`

Returns an array of discord.js ActionRowBuilder, ready to pass to components.

JavaScript

message.reply({
  content: "Are you sure?",
  components: buttons.build(),
});

Handling clicks

Pair your buttons with client.interaction(), matching on the same id you gave the button:

JavaScript

client.interaction({
  id: "confirm",
  content: (interaction) => {
    interaction.reply("Confirmed!");
  },
});

client.registerInteractions();

Note

Looking for a richer layout with text, images, and buttons mixed together? See Display, which builds buttons the same way inside a "buttons" block.