Button

The Button component allows you to create interactive buttons in your Discord messages. Buttons can have different styles, labels, and emojis.

Basic usage

src/app/commands/button-example.tsx

import { type ChatInputCommand, ActionRow, Button } from 'commandkit';

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const buttonRow = (
    <ActionRow>
      <Button customId="clickme-button">Click me!</Button>
    </ActionRow>
  );

  await interaction.reply({
    content: "Here's a button:",
    components: [buttonRow],
  });
};

Button styles

Discord provides several button styles that you can import from the discord.js package:

src/app/commands/button-styles.tsx

import { type ChatInputCommand, ActionRow, Button } from 'commandkit';
import { ButtonStyle } from 'discord.js';

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const buttons = (
    <ActionRow>
      <Button style={ButtonStyle.Primary} customId="primary">
        Primary
      </Button>
      <Button style={ButtonStyle.Secondary} customId="secondary">
        Secondary
      </Button>
      <Button style={ButtonStyle.Success} customId="success">
        Success
      </Button>
      <Button style={ButtonStyle.Danger} customId="danger">
        Danger
      </Button>
    </ActionRow>
  );

  await interaction.reply({
    content: 'Different button styles:',
    components: [buttons],
  });
};

Link buttons

Link buttons redirect users to external URLs:

src/app/commands/link-button.tsx

import { type ChatInputCommand, ActionRow, Button } from 'commandkit';
import { ButtonStyle } from 'discord.js';

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const linkButton = (
    <ActionRow>
      <Button style={ButtonStyle.Link} url="https://discord.com">
        Visit Discord
      </Button>
    </ActionRow>
  );

  await interaction.reply({
    content: 'Click to visit Discord:',
    components: [linkButton],
  });
};

Buttons with emojis

Add emojis to make your buttons more visually appealing:

src/app/commands/emoji-button.tsx

import { type ChatInputCommand, ActionRow, Button } from 'commandkit';

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const emojiButton = (
    <ActionRow>
      <Button emoji="🎮" customId="play-game">
        Play Game
      </Button>
      <Button emoji="⚙️" customId="settings">
        Settings
      </Button>
    </ActionRow>
  );

  await interaction.reply({
    content: 'Buttons with emojis:',
    components: [emojiButton],
  });
};

Disabled buttons

Disable buttons to prevent interaction:

src/app/commands/disabled-button.tsx

import { type ChatInputCommand, ActionRow, Button } from 'commandkit';

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const disabledButton = (
    <ActionRow>
      <Button disabled customId="disabled">
        Cannot Click
      </Button>
      <Button customId="enabled">Can Click</Button>
    </ActionRow>
  );

  await interaction.reply({
    content: 'Disabled vs enabled buttons:',
    components: [disabledButton],
  });
};

Handling button clicks

Handle button interactions with the onClick prop:

src/app/commands/interactive-button.tsx

import {
  type ChatInputCommand,
  type OnButtonKitClick,
  ActionRow,
  Button,
} from 'commandkit';
import { MessageFlags } from 'discord.js';

const handleClick: OnButtonKitClick = async (interaction, context) => {
  await interaction.reply({
    content: 'Button clicked!',
    flags: MessageFlags.Ephemeral,
  });

  // Clean up the button context
  context.dispose();
};

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const interactiveButton = (
    <ActionRow>
      <Button onClick={handleClick} customId="clickme-button">
        Click me!
      </Button>
    </ActionRow>
  );

  await interaction.reply({
    content: 'Click the button to see it work:',
    components: [interactiveButton],
  });
};