Boutons

Le premier type de composant interactif que nous couvrirons la création est un Bouton. Les boutons sont disponibles dans une variété de styles et peuvent être utilisés pour fournir des interfaces permanentes, des flux de travail de confirmation temporaires et d'autres formes d'interaction supplémentaire avec votre bot.

Construction des boutons

Les boutons sont l'une des classes MessageComponent, qui peuvent être envoyés via des messages ou des réponses d'interaction.

Pour cet exemple, vous allez développer la commande ban qui a été précédemment couverte sur la page analyse des options avec un flux de travail de confirmation.

Pour créer vos boutons, utilisez la classe ButtonBuilder, en définissant au moins le customId, le style et le label.

const { ButtonBuilder, ButtonStyle, SlashCommandBuilder } = require('discord.js');

module.exports = {
	// data: new SlashCommandBuilder()...
	async execute(interaction) {
		const target = interaction.options.getUser('target');
		const reason = interaction.options.getString('reason') ?? 'No reason provided';

		const confirm = new ButtonBuilder().setCustomId('confirm').setLabel('Confirm Ban').setStyle(ButtonStyle.Danger);

		const cancel = new ButtonBuilder().setCustomId('cancel').setLabel('Cancel').setStyle(ButtonStyle.Secondary);
	},
};

Envoi des boutons

Pour envoyer vos boutons, créez une ligne d'action et ajoutez les boutons comme composants. Ensuite, envoyez la ligne dans la propriété components de InteractionReplyOptions (étend BaseMessageOptions).

const { ActionRowBuilder, ButtonBuilder, ButtonStyle, SlashCommandBuilder } = require('discord.js');

module.exports = {
	// data: new SlashCommandBuilder()...
	async execute(interaction) {
		const target = interaction.options.getUser('target');
		const reason = interaction.options.getString('reason') ?? 'No reason provided';

		const confirm = new ButtonBuilder().setCustomId('confirm').setLabel('Confirm Ban').setStyle(ButtonStyle.Danger);

		const cancel = new ButtonBuilder().setCustomId('cancel').setLabel('Cancel').setStyle(ButtonStyle.Secondary);

		const row = new ActionRowBuilder().addComponents(cancel, confirm);

		await interaction.reply({
		content: `Êtes-vous sûr de vouloir bannir ${target} pour la raison : ${reason} ?`,
			components: [row],
		});
	},
};

Redémarrez votre bot et envoyez ensuite la commande à un canal auquel votre bot a accès. Si tout se passe bien, vous devriez voir quelque chose comme ceci :

Styles de boutons

Vous remarquerez dans l'exemple ci-dessus que deux styles de boutons différents ont été utilisés, le style gris Secondaire et le style rouge Danger. Ceux-ci ont été choisis spécifiquement pour soutenir les bons principes d'interface utilisateur/expérience utilisateur. Au total, il y a cinq styles de boutons qui peuvent être utilisés selon l'action du bouton :

• Les boutons de style Primary sont bleus. Ceux-ci conviennent à la plupart des actions générales, où c'est l'action primaire ou la plus importante attendue.
• Les boutons de style Secondary sont gris. Utilisez-les pour les actions moins importantes comme le bouton "Annuler" dans l'exemple ci-dessus.
• Les boutons de style Success sont verts. Semblables au bouton Primary, c'est un bon choix pour les actions de confirmation "positives".
• Les boutons de style Danger sont rouges. Là où l'action confirmée est "destructrice", comme un bannissement ou une suppression, l'utilisation d'un bouton rouge aide à alerter l'utilisateur du risque de l'action.
• Les boutons de style Link sont également gris, mais sont marqués avec le symbole "lien externe". Ces boutons ouvriront le lien fourni dans le navigateur sans envoyer d'interaction au bot.

Boutons de lien

Les boutons de lien sont un peu différents des autres styles. Les boutons Link doivent avoir une url, ne peuvent pas avoir un customId et n'envoient pas d'événement d'interaction lorsqu'ils sont cliqués.

const button = new ButtonBuilder()
	.setLabel('discord.js docs')
	.setURL('https://discord.js.org') 
	.setStyle(ButtonStyle.Link); 

Boutons désactivés

Si vous souhaitez empêcher l'utilisation d'un bouton, mais pas le supprimer du message, vous pouvez le désactiver avec la méthode ButtonBuilder#setDisabled :

const button = new ButtonBuilder()
	.setCustomId('disabled')
	.setLabel('Click me?')
	.setStyle(ButtonStyle.Primary)
	.setDisabled(true); 

Boutons emoji

Si vous souhaitez utiliser un emoji de guilde dans un ButtonBuilder, vous pouvez utiliser la méthode ButtonBuilder#setEmoji :

const button = new ButtonBuilder()
	.setCustomId('primary')
	.setLabel('Primary')
	.setStyle(ButtonStyle.Primary)
	.setEmoji('123456789012345678'); 

Next steps

C'est tout ce que vous devez savoir sur la construction et l'envoi de boutons ! À partir de là, vous pouvez découvrir l'autre type de composant de message, les menus de sélection, ou faire en sorte que votre bot commence à écouter les interactions de composants à partir de vos boutons.