Action Row

The ActionRow component is a container that groups interactive components like buttons and select menus together in a single row.

Basic usage

src/app/commands/example.tsx

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

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

  await interaction.reply({
    content: 'Choose an option:',
    components: [row],
  });
};

With select menus

src/app/commands/select-example.tsx

import {
  type ChatInputCommand,
  ActionRow,
  StringSelectMenu,
  StringSelectMenuOption,
} from 'commandkit';

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const row = (
    <ActionRow>
      <StringSelectMenu placeholder="Choose an option">
        <StringSelectMenuOption label="Option 1" value="1" />
        <StringSelectMenuOption label="Option 2" value="2" />
      </StringSelectMenu>
    </ActionRow>
  );

  await interaction.reply({
    content: 'Select from the dropdown:',
    components: [row],
  });
};

Multiple action rows

You can use multiple ActionRows in a single message to organize your components:

src/app/commands/multiple-rows.tsx

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

export const chatInput: ChatInputCommand = async ({ interaction }) => {
  const firstRow = (
    <ActionRow>
      <Button style={ButtonStyle.Primary} customId="button-1">
        Primary Action
      </Button>
      <Button style={ButtonStyle.Secondary} customId="button-2">
        Secondary Action
      </Button>
    </ActionRow>
  );

  const secondRow = (
    <ActionRow>
      <Button style={ButtonStyle.Success} customId="button-3">
        Confirm
      </Button>
      <Button style={ButtonStyle.Danger} customId="button-4">
        Cancel
      </Button>
    </ActionRow>
  );

  await interaction.reply({
    content: 'Multiple action rows:',
    components: [firstRow, secondRow],
  });
};