# Action Buttons

The Kendo UI for Angular Dialog supports displaying action buttons beneath its content. Action buttons let users confirm, cancel, or choose between the outcomes of the Dialog.

To specify the action buttons of the Dialog, use either of the following approaches:

* [Using the `actions` component](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/dialog/action-buttons#using-the-actions-component)
* [Using the `actions` collection](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/dialog/action-buttons#using-the-actions-collection)

## Using the actions Component

To define action buttons in the Dialog, place the buttons inside the `<kendo-dialog-actions>` component as a direct child of the Dialog and handle their click actions in your application. The Dialog renders the actions below the content area.

To arrange the defined buttons, set the [`layout`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogactionscomponent#layout) option of the `<kendo-dialog-actions>` component:

* `start`—Aligns the buttons to the start of the Dialog.
* `center`—Centers the buttons.
* `end`—Aligns the buttons to the end of the Dialog.
* `stretched`—Stretches the buttons to fill the width of the Dialog. This is the default value.

The following example lets you change the layout of the buttons declared inside `<kendo-dialog-actions>`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/action-buttons/action-component/source.txt)

## Using the actions Collection

You can also specify action buttons in the Dialog by passing a [`DialogAction`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogaction) collection to the Dialog's [`actions`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent#actions) input and handling the [`action`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent#action) event. Use the Dialog's [`actionsLayout`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent#actionslayout) input to arrange these buttons. The default layout is `stretched`.

> Starting with Kendo UI for Angular 12.0.0, `start` replaces the deprecated `normal` value for the [`actionsLayout`](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent#actionslayout) option.

The following example lets you change the layout of the buttons defined by an `actions` collection.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/action-buttons/action-collection/source.txt)

## Suggested Links

* [API Reference of the Dialog](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent)
* [API Reference of the DialogActionsComponent](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogactionscomponent)