Message Components

Setting the InteractionHandlerTypes option MessageComponent will have this InteractionHandler trigger for both SelectMenus and Buttons.

Here's a simple example:

JavaScript

const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');class MessageComponentHandler extends InteractionHandler {  constructor(ctx, options) {    super(ctx, {      ...options,      interactionHandlerType: InteractionHandlerTypes.MessageComponent    });  }  parse(interaction) {    if (interaction.customId !== 'my-echo-button-or-select') return this.none();    return this.some();  }  async run(interaction) {    if (interaction.isButton()) {      await interaction.reply({        content: `You clicked a button`      });    } else {      await interaction.reply({        // Remember how we can have multiple values? Let's get the first one!        content: `You selected: ${interaction.values[0]}`      });    }  }}module.exports = {  MessageComponentHandler};

ESM

import { InteractionHandler, InteractionHandlerTypes } from '@sapphire/framework';export class MessageComponentHandler extends InteractionHandler {  constructor(ctx, options) {    super(ctx, {      ...options,      interactionHandlerType: InteractionHandlerTypes.MessageComponent    });  }  parse(interaction) {    if (interaction.customId !== 'my-echo-button-or-select') return this.none();    return this.some();  }  async run(interaction) {    if (interaction.isButton()) {      await interaction.reply({        content: `You clicked a button`      });    } else {      await interaction.reply({        // Remember how we can have multiple values? Let's get the first one!        content: `You selected: ${interaction.values[0]}`      });    }  }}

TypeScript

import { InteractionHandler, InteractionHandlerTypes, PieceContext } from '@sapphire/framework';import type { SelectMenuInteraction, ButtonInteraction } from 'discord.js';export class MessageComponentHandler extends InteractionHandler {  public constructor(ctx: PieceContext, options: InteractionHandler.Options) {    super(ctx, {      ...options,      interactionHandlerType: InteractionHandlerTypes.MessageComponent    });  }  public override parse(interaction: ButtonInteraction | SelectMenuInteraction) {    if (interaction.customId !== 'my-echo-button-or-select') return this.none();    return this.some();  }  public async run(interaction: ButtonInteraction | SelectMenuInteraction) {    if (interaction.isButton()) {      await interaction.reply({        content: `You clicked a button`      });    } else {      await interaction.reply({        // Remember how we can have multiple values? Let's get the first one!        content: `You selected: ${interaction.values[0]}`      });    }  }}