Client Library
Color Theme Compliance (Beta)
UI Functions


Sometimes you may want to allow users to take actions directly on and related to a specific card. In those cases you would use the card-buttons capability to add the buttons you need to the card. All buttons that come from Power-Ups land in the Power-Ups section.


You should return an array of button objects or a Promise that resolves to one. A button object has the following properties:

iconStringThe url to an icon for the button. Trello will add a color=[hex] query parameter which you can use to make the icon color match ours. This is easiest to do with an SVG icon.
textStringThe name of the button, keep it short and sweet
conditionStringTo what types of users the button should be displayed. One of:

admin - User is an admin on the board.
edit - User can edit the board.
readOnly - User can not edit the board.
signedIn - User is logged into Trello.
signedOut - User is not logged into Trello.
always - Always show.

The default is edit
callbackFunctionOptional function that will be called on click of the button
urlStringOptional href for the button
targetStringOptional with use of url property to add a target to the anchor tag.

Example Code

var GRAY_ICON = '';

var onBtnClick = function (t, opts) {
  console.log('Someone clicked the button');

  'card-buttons': function (t, opts) {
    return [{
      // usually you will provide a callback function to be run on button click
      // we recommend that you use a popup on click generally
      icon: GRAY_ICON, // don't use a colored icon here
      text: 'Open Popup',
      callback: onBtnClick,
      condition: 'edit'
    }, {
      // but of course, you could also just kick off to a url if that's your thing
      icon: GRAY_ICON,
      text: 'Just a URL',
      condition: 'always',
      url: '',
      target: 'Trello Developer Site' // optional target for above url

Rate this page: