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");
            }))

        <%= Html.Kendo().ButtonGroup()
            .Name("player")
            .Items(t =>
            {
                    t.Add().Icon("play");
                    t.Add().Icon("pause");
                    t.Add().Icon("stop");
            }) %>

The configuration from the previous example is expected to produce the HTML output from the following example.

    <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
Not finding the help you need? Improve this article