---
title: buttons
---

Defines buttons that can be used in headerToolbar/footerToolbar — both custom buttons and overrides for standard buttons.

<div class='spec'>

Object

</div>

Specify a hash of button configurations. Reference custom button names from the `headerToolbar` setting:

```js
var calendar = new Calendar(calendarEl, {
  buttons: {
    myCustomButton: {
      text: 'custom!',
      click: function() {
        alert('clicked the custom button!');
      }
    }
  },
  headerToolbar: {
    start: 'prev,next today myCustomButton',
    center: 'title',
    end: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
});
```

You can also override the text or icon of standard buttons like `today`, `prev`, `next`:

```jsx
var calendar = new Calendar(calendarEl, {
  buttons: {
    today: { text: 'Go to Today' },
    next: { iconContent: <svg>...</svg> }
  }
});
```

Each `buttons` entry accepts the following properties:

- `text` - the text to display on the button. For built-in buttons that often have icons, ensure you set `display: 'text' | 'text-icon' | 'icon-text'` if you want this text displayed.
- `hint` - the [accessibility hint](hints). defaults to `text`
- `click` - a callback for custom buttons, called when clicked. Accepts two arguments: `(mouseEvent, htmlElement)`
- `iconClass` - a CSS class name for a glyphicon-style icon.
- `iconContent` - SVG markup (preferred over `iconClass`). [Injectable content](content-injection).
- `class`/`className` - a [ClassName Input](classname-input) for the button element
- `isPrimary` - when `true`, marks the button as a primary action (receives additional styling)
- `display` - controls whether the button shows an icon, text, or both. Overrides the global [buttonDisplay](buttonDisplay) setting. Accepted values: `'auto'` (default) | `'icon'` | `'text'` | `'icon-text'` | `'text-icon'`. The `'auto'` value means that if the theme supplies an icon, then ONLY the icon will be displayed, no text. Otherwise, just text will be displayed.
- `didMount` - called right after the button has been added to the DOM
- `willUnmount` - called right before the button will be removed from the DOM

[See a demo of buttons](toolbar-demo).