New to Telerik UI for ASP.NET Core? Download free 30-day trial

Icon ButtonGroup

The ButtonGroup can accommodate an icon and in this way to enhance the meaning of the text content.

You can configure the icons by using the .Icon() method of the ButtonGroup.

    @(Html.Kendo().ButtonGroup()
    .Name("player")
    .Items(t =>
    {
            t.Add().Icon("play");
            t.Add().Icon("pause");
            t.Add().Icon("stop");
    }))
    <kendo-buttongroup name="player">
        <buttongroup-items>
            <item icon="play" text="Play"></item>
            <item icon="pause" text="Pause"></item>
            <item icon="stop" text="Stop"></item>
        </buttongroup-items>
    </kendo-buttongroup>

This ButtonGroup configuration is expected to produce the following HTML output:

<div class="k-button-group k-widget" data-role="buttongroup" id="player" role="group" tabindex="0">
    <span data-icon="play" aria-pressed="false" role="button" class="k-button k-button-icon">
        <span class="k-icon k-i-play"></span>
    </span>
    <span data-icon="pause" aria-pressed="false" role="button" class="k-button k-button-icon">
        <span class="k-icon k-i-pause"></span>
    </span>
    <span data-icon="stop" aria-pressed="false" role="button" class="k-button k-button-icon">
        <span class="k-icon k-i-stop"></span>
    </span>
</div>

See Also

In this article