🔘
Add Button
ui.buttonThe Control PanelControlsAdds a button to whatever message you send next — Reply, Embed, Send or Follow-up all pick it up. Give it a custom id, then make a Button Pressed trigger with the same id to run a flow when someone clicks it. Five buttons fit on a row; after that they wrap.
When to use this
- →Anything after a colon in the custom id comes back as {{component.args}} — try confirm:{{user.id}}
- →Link buttons open a URL and never fire a trigger, so they don't need a custom id
- →Five buttons per row, five rows per message — use New Button Row to break them up early
On the canvas
This is what Add Button looks like when you place it on your flow. Each field below is something you configure in the inspector panel.
🔘Controls
Add Button
ui.buttonlabelrequired
Yes, do it
customId
vote:yes — your trigger listens for this
style
select…
emoji
🎉
url
https://… (link buttons only)
disabled
boolean…
output
error
Config fields
| Field | Type | Req | What it does |
|---|---|---|---|
labelYes, do it | text | yes | Button text 🔘 |
customIdvote:yes — your trigger listens for this | text | — | Custom id 🏷️ |
style | select | — | Colour 🎨 |
emoji🎉 | text | — | Emoji (optional) 😀 |
urlhttps://… (link buttons only) | text | — | Link URL 🔗 |
disabled | boolean | — | Start greyed out 🚫 |
Output ports
outputButton staged — carry on and send a message
errorMissing a label, a custom id, or a link URL
📐
In TypeScript, this would be…
Not something you need to write — just a look at what Kitcord does for you.
TypeScript
const button = new ButtonBuilder()
.setCustomId("vote:yes")
.setLabel("Yes, do it")
.setStyle(ButtonStyle.Success);
// Staged now; sent with the next reply
row.addComponents(button);More Controls pieces