Button & Component Builder
Design interactive Discord buttons and select menus with real-time preview. Export ready-to-use code for discord.js, discord.py, or JSON.
Action Rows
Maximum 5 action rows. Each row can have up to 5 buttons OR 1 select menu.
Add Components to Row 1
Discord Preview
Export Code
const { ActionRowBuilder, ButtonBuilder, StringSelectMenuBuilder, ButtonStyle, ComponentType } = require('discord.js');
const rows = [];
// Action Row 1
const row1 = new ActionRowBuilder()
;
rows.push(row1);
// Send the message with components
await interaction.reply({
content: 'Here are your components!',
components: rows
});Component Features
Button Styles
Five button styles: Primary (blue), Secondary (gray), Success (green), Danger (red), and Link buttons.
Select Menus
Create string, user, role, channel, and mentionable select menus with custom options and descriptions.
Emoji Support
Add emojis to buttons and select menu options for better visual appeal and user experience.
Action Rows
Organize components into up to 5 action rows, each supporting 5 buttons or 1 select menu.
Live Preview
See exactly how your components will appear in Discord with real-time visual preview.
Code Export
Export components as discord.js, discord.py, or raw JSON format with copy and download options.
Button Style Guide
Primary (Blue)
Use for main actions and confirmations. Stands out as the primary call-to-action.
Secondary (Gray)
Use for alternative actions or less important options. Neutral appearance.
Success (Green)
Use for positive actions like approve, accept, or confirm success operations.
Danger (Red)
Use for destructive actions like delete, remove, or cancel. Warns users of consequences.
Link
Opens an external URL when clicked. Does not trigger interaction events. Requires a URL instead of custom ID.
Discord Limitations
📏 Action Row Limits
- • Maximum 5 action rows per message
- • Each action row can contain up to 5 buttons OR 1 select menu
- • Cannot mix buttons and select menus in the same action row
🔘 Button Constraints
- • Button labels: Maximum 80 characters
- • Custom IDs: Maximum 100 characters
- • Link buttons cannot have custom IDs (they use URLs instead)
📋 Select Menu Rules
- • Maximum 25 options per select menu
- • Option labels and values: Maximum 100 characters each
- • Option descriptions: Maximum 100 characters
- • Placeholder text: Maximum 150 characters
- • Min/Max values: Between 0 and 25
How to Use
Add Action Rows
Start by creating action rows. You can have up to 5 rows to organize your components.
Add Components
Click "Button" or "Select Menu" to add components to the active row. Remember each row can have up to 5 buttons OR 1 select menu.
Customize Components
Configure each component's style, label, custom ID, emojis, and other properties. For select menus, add and customize options.
Preview & Export
View the live Discord preview to see how your components look. When ready, select your framework and export the code.
Implement Interaction Handlers
Copy the generated code into your bot. Don't forget to create interaction handlers for button clicks and select menu selections using the custom IDs you defined.