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

ActionButton

configuration

Configures the action button (send/stop button) in the message input area. Allows customization of icons, text labels, and loading state appearance.

actionButton

Object

Default: null

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        icon: "arrow-right",
        text: "Submit",
        loadingIcon: "loading",
        loadingText: "Processing...",
    }
});
</script>

actionButton.fillMode

String

The fill mode for the button (e.g., "flat", "solid", "outline").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        fillMode: "solid"
    }
});
</script>

actionButton.icon

String

The icon name for the action button in its default (send) state.

Default: "send"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        icon: "arrow-right"
    }
});
</script>

actionButton.loadingIcon

String

The icon name for the action button when in loading state.

Default: "stop"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        loadingIcon: "pause"
    }
});
</script>

actionButton.loadingText

String

The text label for the action button when in loading state.

Default: null

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        loadingText: "Stop"
    }
});
</script>

actionButton.rounded

String

The border radius for the button (e.g., "small", "medium", "large", "full").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        rounded: "full"
    }
});
</script>

actionButton.size

String

The size of the button (e.g., "small", "medium", "large").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        size: "medium"
    }
});
</script>

actionButton.text

String

The text label for the action button in its default (send) state.

Default: null

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        text: "Submit"
    }
});
</script>

actionButton.themeColor

String

The theme color for the button (e.g., "base", "primary", "secondary").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    authorId: "user",
    actionButton: {
        themeColor: "primary"
    }
});
</script>