New to Kendo UI for jQuery? Start a free 30-day trial

ActionButtons

configuration

A JavaScript array that contains the ActionSheet's action buttons configuration. They will be rendered in the footer of the widget.

actionButtons

Array

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.click

Function

Specifies the click event handler of the action button.

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.disabled

Boolean

If set to true, the action button will be disabled.

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick,
                disabled: true
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.fillMode

String

Controls how the color is applied to the button. When undefined (the default), the theme controls the default fill mode. Valid values are: "solid", "outline", "flat", "link".

The "none" value is deprecated. Use custom CSS instead.

Default: undefined

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                iconClass: "custom-confirm-button-class",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.icon

String

Specifies the icon's name of the action button.

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.iconClass

String

Specifies the icon's class of the action button.

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                iconClass: "custom-confirm-button-class",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.rounded

String

Controls what border radius is applied to a button. When undefined (the default), the theme controls the default border radius. Valid values are: "small", "medium", "large", "full".

The "none" value is deprecated. Use custom CSS instead.

Default: undefined

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                iconClass: "custom-confirm-button-class",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.size

String

Controls the overall physical size of a button. When undefined (the default), the theme controls the default size. Valid values are: "small", "medium", "large".

The "none" value is deprecated. Use custom CSS instead.

Default: undefined

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                iconClass: "custom-confirm-button-class",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

actionButtons.text

String

Specifies the text of the action button.

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>

Controls the main color applied to the button. Valid values are: "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse", and "none". Default value is "base".

Default: 'base'

<div id="actionsheet">Do you confirm or cancel?</div>
<script>
    var actionsheet = $('#actionsheet').kendoActionSheet({
        title: 'Confirmation',
        closeButton: true,
        actionButtons: [
             {
                icon: "check",
                iconClass: "custom-confirm-button-class",
                fillMode: "solid",
                themeColor: "primary",
                rounded: "full",
                size: "large",
                text: "Confirm",
                click: onClick
            },
            {
                icon: "x",
                fillMode: "flat",
                size: "large",
                text: "Close",
                click: onClick
            }
        ]
    }).data('kendoActionSheet');

    function onClick(e) {
        e.preventDefault();
        alert($(e.target).text() + " clicked;")
        actionsheet.close();
    }

    actionsheet.open();
</script>