Creating Buttons

Button files contain a button handler. They aren’t responsible for adding buttons to messages but are a way of running code when the buttons you made are pressed.

import { button } from 'jellycommands';

export default button({
  id: 'test',

  run: () => {
    // Do something with button click
  },
});

You can view a list of all the button options here

:::tip TIP If you are unsure how to add buttons to messages, checkout the Discord.js Guide :::

Button id

The id field on the button is important, it can be a string, regexp, or a function. The id field corresponds to the customId feild you set when you create a button.

Simple ids

The simplest form is a plain string, for example you could have an id of hello. This might be a button that does the same thing each time.

import { button } from 'jellycommands';

export default button({
  id: 'hello',

  run: async ({ interaction }) => {
    await interaction.reply({
      content: 'Hello there!',
    });
  },
});

Regex & Function ids

If the id is not the same each time. As an example, say you have a button that should respond with a fruit name. Your id might look like fruit_[FRUIT NAME], we can impliment this with regex or a function. The function should always return true or false

import { button } from 'jellycommands';

export default button({
  // a regex id
  id: /fruit_([\w])+/,

  // a function id
  id: (id) => {
    return id.startsWith('fruit_');
  },

  run: async ({ interaction }) => {
    const fruit = interaction.customId.replace('fruit_', '');

    await interaction.reply({
      content: `Your fruit is ${fruit}`,
    });
  },
});

Button run handler

When an event is invoked, the event’s run function is called. This is where your custom event logic lives.

When a button is clicked, the run function is called. This is where your custom logic for the button lives.

You are provided with context, which allows you to get things such as the interaction.

Context

The context object has the following properties:

interaction ButtonInteraction

The button interaction from discord.js

client JellyCommands

The client used by the command.

props Props

Your project’s props.