Action Buttons

Updated on Mar 12, 2026

The Kendo UI for Angular ActionSheet provides options for rendering action buttons in the component and customizing their content and layout.

To configure the action buttons of the ActionSheet component, use either of the following approaches:

• Using the actions collection
• Using a footer template

Using the Actions Collection

You can define action buttons in the ActionSheet by passing an ActionSheetAction collection to the actions property of the component.

Change Theme

Theme

Loading ...

To customize the alignment and the orientation of the action buttons, you can use the actionsLayout option of the ActionSheet component.

html

<kendo-actionsheet
    [actions]="actions"
    [actionsLayout]="actionsLayout"
    ...>
</kendo-actionsheet>

ts

public actions: ActionSheetAction[] = [
    { text: 'Confirm', svgIcon: this.checkIcon, themeColor: 'primary' },
    { text: 'Cancel', svgIcon: this.cancelIcon }
];

public actionsLayout: ActionSheetActionsLayout = {
    orientation: 'horizontal',
    alignment: 'start',
};

The ActionSheet also emits an action event that fires when any of the defined action buttons is clicked. This event allows you to implement custom on-click logic for the respective action button.

Using a Footer Template

For a more customizable approach, you can use the Button component to render the desired action buttons in a custom kendoActionSheetFooterTemplate.

The actionsLayout property of the ActionSheet component works with the footer template as well.

The following example demonstrates how to render action buttons in the ActionSheet by using a custom footer template.

Change Theme

Theme

Loading ...

Suggested Links

• ActionSheet Footer Template
• API Reference of the ActionSheetComponent