Components

Components are used to create interactive elements in your bot, such as buttons, select menus, and text inputs.

When you create a component, you will need to pass it to the components property of the Command class. This will allow it to be registered with the bot as a handler. When you pass it, make sure you aren't instantiating it, but rather just passing the class itself.

src/commands/ping.ts

import { Command, type CommandInteraction } from "@buape/carbon"
 
export default class PingCommand extends Command {
	name = "ping"
	description = "A simple ping command"
	defer = false
 
	components = [PingButton]
 
	async run(interaction: CommandInteraction) {
		return interaction.reply({
			content: "Pong!"
		})
	}
}
 
class PingButton extends Button {
	customId = "ping"
	label = "Ping"
	style = ButtonStyle.Primary
 
	async run(interaction: ButtonInteraction) {
		return interaction.reply({
			content: "OMG YOU CLICKED THE BUTTON"
		})
	}
}

If you don't want to automatically register the components, you can do so manually by setting the autoRegister option to false in the client options.

Buttons

Container

File

MediaGallery

Section

Select Menus

TextDisplay

Text Inputs

Thumbnail