Skip to main content
Version: Next

Button

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

Basic Usage​

import { Button } from 'commandkit';

const button = <Button>Click me!</Button>;

Button Styles​

import { Button } from 'commandkit';

// Primary button (blue)
const primary = <Button style="primary">Primary</Button>;

// Secondary button (gray)
const secondary = <Button style="secondary">Secondary</Button>;

// Success button (green)
const success = <Button style="success">Success</Button>;

// Danger button (red)
const danger = <Button style="danger">Danger</Button>;

// Link button
const link = (
  <Button style="link" url="https://discord.com">
    Link
  </Button>
);

With Emoji​

import { Button } from 'commandkit';

const button = <Button emoji="🎮">Play Game</Button>;

Disabled State​

import { Button } from 'commandkit';

const button = <Button disabled>Cannot Click</Button>;

Handling Clicks​

import { Button, OnButtonKitClick } from 'commandkit';

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

const button = <Button onClick={handleClick}>Click me!</Button>;

Important Notes​

  • Buttons must be placed inside an ActionRow
  • You can have up to 5 buttons in a single row
  • Link buttons cannot have click handlers
  • Buttons can be disabled but still visible
  • Custom IDs are automatically generated if not provided