Angular SplitButton groups a set of commands in an overlay with a default command.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {SplitButtonModule} from 'primeng/splitbutton';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
SplitButton has a default command button and a collection of menuitems to be displayed in an overlay.
<pre><code class="lang-html">&lt;p-splitButton label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"&gt;&lt;/p-splitButton&gt;
</code></pre>
<h3 id="animation-configuration">Animation Configuration</h3>
Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.
<pre><code class="lang-html">&lt;p-splitButton [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"&gt;&lt;/p-splitButton&gt;
</code></pre>
<h3 id="menumodel-api">MenuModel API</h3>
SplitButton uses the common menumodel api to define its items, visit <a target="_blank" href="https://primefaces.org/primeng/showcase/#/menumodel">MenuModel API</a> for details.
<h3 id="theming">Theming</h3>
SplitButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/splitbutton">SplitButton</a> showcase for demos and documentation.

Angular SplitButton groups a set of commands in an overlay with a default command.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {SplitButtonModule} from 'primeng/splitbutton';
```

### Getting Started

SplitButton has a default command button and a collection of menuitems to be displayed in an overlay.

```html
<p-splitButton label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"></p-splitButton>
```

### Animation Configuration

Transition of the open and hide animations can be customized using the **showTransitionOptions** and **hideTransitionOptions** properties, example below disables the animations altogether.

```html
<p-splitButton [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"></p-splitButton>
```

### MenuModel API

SplitButton uses the common menumodel api to define its items, visit [MenuModel API](https://primefaces.org/primeng/showcase/#/menumodel) for details.

### Theming

SplitButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [SplitButton](https://primefaces.org/primeng/showcase/#/splitbutton) showcase for demos and documentation.