---
title: "Angular Popup Configure buttons Example | Mobiscroll"
component: "Popup"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/popup/button-configuration"
---

# Configure buttons - Angular Popup demo

Angular popup component with different button configurations. Use it with or without buttons. Add custom actions.

- [Live demo](https://demo.mobiscroll.com/angular/popup/button-configuration)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/pickers/popup/button-configuration)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/popup/button-configuration.md), [jQuery](https://demo.mobiscroll.com/jquery/popup/button-configuration.md), [React](https://demo.mobiscroll.com/react/popup/button-configuration.md), [Vue](https://demo.mobiscroll.com/vue/popup/button-configuration.md)

## Description

You can display the popup without any buttons for a clean, minimal interface, use predefined buttons for standard actions, or customize it by adding your own buttons with tailored text, style, and functionality to meet your specific needs.

By default, the popup is displayed without any buttons for a clean, minimal look. If you want some standard actions you can use the following predefined [`buttons`](https://mobiscroll.com/docs/angular/popup/api#opt-buttons):

- `ok` for confirmation
- `cancel` to dismiss the popup
- `close` for closing the popup without action
- `set` for saving or applying changes

You can add custom buttons with tailored text, style, and functionality if you have more specific needs.

## What this demo shows

- Three popup examples demonstrate no buttons, predefined buttons, and a custom button.
- **No buttons** The first example opens a popup without buttons, which is the default configuration.
- **Predefined buttons** The second example opens a popup with a blue `Ok` button and a gray `Cancel` button. Both buttons closes the popup.
- **Custom button** The third example opens a popup with a custom button. Clicking it displays the message `Custom button clicked`.
- **Modal layout** Each popup uses the default modal layout.
- **Popup content** Each popup contains a heading and descriptive text.
- **Visual separation** A modal overlay and shadow separate each popup from the underlying content.

## Best for

- **Informational popups** Use a buttonless popup when the content does not require an action in the popup footer.
- **Confirmation prompts** Use predefined `Ok` and `Cancel` buttons when users need to confirm or dismiss an action.
- **Custom workflows** Use a custom button when an action needs tailored text, styling, or behavior.
- **Configuration comparison** Compare the available button patterns before choosing one for a popup workflow.

## Tutorial

```ts
<mbsc-popup
  [buttons]="[]"
>
```

```ts
<mbsc-popup
  [buttons]="['ok', 'cancel']"
>
```

```ts
<mbsc-popup
  [buttons]="[{
    text: 'Custom',
    handler: function () {
      mobiscroll.toast({
        message: 'Custom button clicked'
      });
    }
  }]"
>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/popup/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/angular/popup/api#opt-display) - option
- [`buttons`](https://mobiscroll.com/docs/angular/popup/api#opt-buttons) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MbscModule, MbscPopup, MbscPopupOptions, Notifications, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  constructor(private notify: Notifications) {}

  @ViewChild('popupNoBtn', { static: false }) popupNoBtn!: MbscPopup;
  @ViewChild('popupPredefined', { static: false }) popupPredefined!: MbscPopup;
  @ViewChild('popupCustom', { static: false }) popupCustom!: MbscPopup;

  popupOptionsNoBtn: MbscPopupOptions = {
    display: 'center',
  };

  popupOptionsPredefined: MbscPopupOptions = {
    display: 'center',
    buttons: ['ok', 'cancel'],
  };

  popupOptionsCustom: MbscPopupOptions = {
    display: 'center',
    buttons: [
      {
        text: 'Custom',
        handler: () => {
          this.notify.toast({
            message: 'Custom button clicked',
          });
        },
      },
    ],
  };

  openPopupNoBtn(): void {
    this.popupNoBtn.open();
  }

  openPopupPredefined(): void {
    this.popupPredefined.open();
  }

  openPopupCustom(): void {
    this.popupCustom.open();
  }
}
```

### Template

```html
<mbsc-page>
  <div class="mbsc-align-center">
    <div class="mbsc-note">Customize popup buttons depending on your context.</div>
  </div>
  <div class="mbsc-form-group">
    <div class="mbsc-button-group-block">
      <mbsc-button (click)="openPopupNoBtn()">No Buttons</mbsc-button>
      <mbsc-button (click)="openPopupPredefined()">Predefined buttons</mbsc-button>
      <mbsc-button (click)="openPopupCustom()">Custom button</mbsc-button>
    </div>
  </div>

  <mbsc-popup #popupNoBtn [options]="popupOptionsNoBtn">
    <div class="mbsc-align-center mbsc-padding">
      <h3 class="md-text-center">Hi there!</h3>
      <p class="md-text-center">This is the default with no buttons.</p>
    </div>
  </mbsc-popup>

  <mbsc-popup #popupPredefined [options]="popupOptionsPredefined">
    <div class="mbsc-align-center mbsc-padding">
      <h3 class="md-text-center">Hi again!</h3>
      <p class="md-text-center">This is a popup with predifined buttons.</p>
    </div>
  </mbsc-popup>

  <mbsc-popup #popupCustom [options]="popupOptionsCustom">
    <div class="mbsc-align-center mbsc-padding">
      <h3 class="md-text-center">Hi again!</h3>
      <p class="md-text-center">This is a popup with a custom button.</p>
    </div>
  </mbsc-popup>
</mbsc-page>
```

### CSS

```css
/* style */
```

## Implementation notes

- `buttons: []` (or the option omitted) renders the popup with no footer buttons - the default, minimal configuration.
- `buttons: ['ok', 'cancel']` renders the two predefined buttons by name; `ok` renders as the primary (blue) action, `cancel` as the secondary (gray) action. Both predefined buttons close the popup when clicked - no handler is required.
- Other predefined button keywords are `'close'` (closes the popup without a confirm action) and `'set'` (applies/confirms changes, typically paired with a form).
- A custom button is an object entry in `buttons`: `{ text: 'Custom', handler: function () { ... } }`. `text` sets the button label; `handler` runs on click and is responsible for any action, including closing the popup (a custom button does not auto-close unless the handler calls `.close()` or the popup instance's close logic).
- In this demo the custom button's `handler` calls `mobiscroll.toast({ message: 'Custom button clicked' })` rather than closing the popup.
- `buttons` accepts a mixed array of predefined string keywords and custom button objects in any combination, e.g. `buttons: [{ text: 'Ok', handler: 'set' }, 'cancel']` - a custom object's `handler` can also be one of the predefined action keywords (`'set'`, `'cancel'`, `'close'`) instead of a function.
- Across frameworks the option is passed the same way: React/Vue bind it as a `buttons`/`:buttons` prop with the same array shape, Angular binds `[buttons]="[...]"`, and JS/jQuery pass it in the options object at `.popup({ buttons: [...] })`.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Understanding display modes](https://demo.mobiscroll.com/angular/popup/mobile-desktop-display.md) - Angular popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning.
- Next: [Responsive](https://demo.mobiscroll.com/angular/popup/responsive.md) - Responsive Angular popup component. Change display modes and how the component renders across different screen sizes.