Components

Components in djs-core are reusable interaction elements that can be used within command or context menu responses. Unlike interactions (commands and context menus), components are not standalone - they enhance interactions by providing interactive UI elements.

What are Components?

Components are interactive UI elements that allow users to interact with your bot through buttons, forms, and select menus. They're created as reusable modules that can be imported and used across multiple commands or context menus.

Components help keep your code organized and DRY (Don't Repeat Yourself) by allowing you to define interaction logic once and reuse it throughout your bot.

Types of Components

Buttons

Interactive buttons that users can click to trigger actions. Buttons support custom styles, emojis, and can store custom data.

Learn more in the Buttons guide.

Modals

Form-like dialogs that collect text input from users. Modals can have up to 5 text input fields and are commonly opened from buttons.

Learn more in the Modals guide.

Select Menus

Dropdown menus that allow users to select from predefined options. djs-core supports several types:

• String Select Menus: Text-based options with custom labels and values
• User Select Menus: Select Discord users from the server
• Role Select Menus: Select Discord roles from the server
• Channel Select Menus: Select Discord channels from the server
• Mentionable Select Menus: Select users or roles (combined)

Learn more:

• String Select Menus
• User Select Menus
• Role Select Menus
• Channel Select Menus
• Mentionable Select Menus

When to Use Components

Components enhance your interactions by providing interactive UI elements. Here's when to use each type:

Component Organization

Components are organized in the src/components/ directory:

import { Button } from "@djs-core/runtime";
import { ButtonStyle } from "discord.js";

export default new Button()
  .setLabel("Confirm")
  .setStyle(ButtonStyle.Success)
  .run(async (interaction) => {
    await interaction.reply("Confirmed!");
  });