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

ThemeColor

configuration

Specifies the theme color of the FloatingActionButton. Valid options are "base", "primary", "secondary", and "tertiary".

themeColor

String

Default: 'secondary'

<button id="fab-primary"></button>
<button id="fab-secondary"></button>
<button id="fab-tertiary"></button>

<script>
    $('#fab-primary').kendoFloatingActionButton({
        themeColor: 'primary',
        icon: 'home',
        align: 'top start'
    });
    $('#fab-secondary').kendoFloatingActionButton({
        themeColor: 'secondary',
        icon: 'home',
        align: 'top center'
    });
    $('#fab-tertiary').kendoFloatingActionButton({
        themeColor: 'tertiary',
        icon: 'home',
        align: 'top end'
    });
</script>