Building components

Components are built with a builder, which is a JavaScript class, which represents it. Within this builder you can customize the component so it's either text or color.

There are diffrent types of components' builders with diffrent customization but all have a common property: the custom Id. A unique identifier which is used for handling the interactions of the component.

ActionRow

All the builders are sent within an ActionRow. Each message can contain a maxium of 5 actions row.

Here is how we create a basic ActionRow:

import { ActionRow } from 'seyfert';
 
const row = new ActionRow()
 
  .setComponents([])
 
  .addComponents();

Building each component

Now we are going to build each type of component and set it within an ActionRow:

An ActionRow shouldn't contain more than 5 buttons.

import { ActionRow, Button } from 'seyfert';
import { ButtonStyle } from 'seyfert/lib/types';
 
const button = new Button()
  .setCustomId('first-button')
  .setStyle(ButtonStyle.Primary)
  .setLabel('First Button');
 
const row = new ActionRow<Button>().setComponents([button]);

Sending the components

After creating the components you have to send the ActionRow into the components field. You can check example below:

import { Declare, Command, type CommandContext, ActionRow, Button } from 'seyfert';
import { ButtonStyle } from 'seyfert/lib/types';
 
@Declare({
  name: 'ping',
  description: 'Show the ping with discord'
})
export default class PingCommand extends Command {
 
	async run(ctx: CommandContext) {
		// average latency between shards
    const ping = ctx.client.gateway.latency;
 
    const row = new ActionRow()
      .setComponents([
        new Button().setCustomId('pingbtn').setLabel(`Ping: ${ping}`).setStyle(ButtonStyle.Primary)
      ])
 
    await ctx.write({
      content: `The ping is \`${ping}\``,
      components: [row]
    });
  }
}

Building components

ActionRow

Building each component

Sending the components

On this page