Button

type: 2 Messages

The Button is something the user can click. It goes inside an Action Row or as the accessory of a Section.

The 6 styles

Preview

My BotAPPToday at 12:00 PM

PrimarySecondarySuccessDangerLink

🛒 BuyDisabled🎉With emoji

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 1,
      "components": [
        {
          "type": 2,
          "style": 1,
          "label": "Primary",
          "custom_id": "b1"
        },
        {
          "type": 2,
          "style": 2,
          "label": "Secondary",
          "custom_id": "b2"
        },
        {
          "type": 2,
          "style": 3,
          "label": "Success",
          "custom_id": "b3"
        },
        {
          "type": 2,
          "style": 4,
          "label": "Danger",
          "custom_id": "b4"
        },
        {
          "type": 2,
          "style": 5,
          "label": "Link",
          "url": "https://discord.com"
        }
      ]
    },
    {
      "type": 1,
      "components": [
        {
          "type": 2,
          "style": 6,
          "sku_id": "1234567890123456789"
        },
        {
          "type": 2,
          "style": 2,
          "label": "Disabled",
          "custom_id": "b6",
          "disabled": true
        },
        {
          "type": 2,
          "style": 2,
          "label": "With emoji",
          "custom_id": "b7",
          "emoji": {
            "name": "🎉"
          }
        }
      ]
    }
  ]
}

Style	Value	Requires	Recommended use
Primary	1	custom_id	The main action. Only one per group.
Secondary	2	custom_id	Secondary or equal-weight actions.
Success	3	custom_id	Positive actions (confirm, accept).
Danger	4	custom_id	Dangerous or irreversible actions (delete, kick).
Link	5	url	Opens a website. Does not send an interaction to your bot.
Premium	6	sku_id	Purchase one of your app’s products. Does not send an interaction.

Fields

Field	Type	Description
type	integer	required Always 2.
id	integer	optional Unique identifier.
style	integer	required Button style (table above).
label	string	optional Button text. Max 80 characters.
emoji	partial emoji	optional { "name": "🎉" } or { "name": "name", "id": "123" }.
custom_id	string	What your bot receives on click. 1-100 characters. required for styles 1-4, not allowed for 5 and 6.
url	string	URL to open. Max 512 characters. required for Link (5).
sku_id	snowflake	Product ID. required for Premium (6).
disabled	boolean	optional Disable the button. Defaults to false.

Premium button

The Premium style can’t have custom_id, label, url or emoji: Discord automatically shows the product name and price.

Keep labels short

Discord recommends labels of about 34 characters with an icon or emoji, or 38 without, so they don’t get cut off on mobile.

Code

HTTP

{
  "type": 1,
  "components": [
    { "type": 2, "style": 1, "label": "Confirm", "custom_id": "confirm", "emoji": { "name": "✅" } },
    { "type": 2, "style": 5, "label": "Website", "url": "https://discord.com" },
    { "type": 2, "style": 6, "sku_id": "1234567890123456789" }
  ]
}

JavaScript

import { ActionRowBuilder, ButtonBuilder, ButtonStyle } from 'discord.js';

const row = new ActionRowBuilder().addComponents(
  new ButtonBuilder().setCustomId('confirm').setLabel('Confirm').setEmoji('✅').setStyle(ButtonStyle.Primary),
  new ButtonBuilder().setLabel('Website').setURL('https://discord.com').setStyle(ButtonStyle.Link),
  new ButtonBuilder().setSKUId('1234567890123456789').setStyle(ButtonStyle.Premium),
);

Python

confirm = discord.ui.Button(label="Confirm", emoji="✅", style=discord.ButtonStyle.primary, custom_id="confirm")
website = discord.ui.Button(label="Website", url="https://discord.com")  # Link style is set automatically
premium = discord.ui.Button(sku_id=1234567890123456789)  # Premium style is set automatically


async def on_confirm(interaction: discord.Interaction):
    await interaction.response.send_message("Confirmed!", ephemeral=True)

confirm.callback = on_confirm

row = discord.ui.ActionRow(confirm, website, premium)

Go

row := discordgo.ActionsRow{Components: []discordgo.MessageComponent{
  discordgo.Button{Label: "Confirm", Style: discordgo.PrimaryButton, CustomID: "confirm",
    Emoji: &discordgo.ComponentEmoji{Name: "✅"}},
  discordgo.Button{Label: "Website", Style: discordgo.LinkButton, URL: "https://discord.com"},
  discordgo.Button{Style: discordgo.PremiumButton, SKUID: "1234567890123456789"},
}}

When someone clicks it

Your bot receives an interaction with data.custom_id and data.component_type = 2. Learn how to respond in Interactions.

Tips

• The custom_id must be unique within the message.
• Use disabled: true to show a button that can’t be used yet (for example “Next” on the last page).
• Custom emojis need both id and name: { "name": "pepe", "id": "123456789012345678" }.