SplitButton Appearance
This article describes the declarative settings of the SplitButton component, which affect its styling and appearance.
The SplitButton provides the same appearance parameters, as the regular Button component:
Setting Parameter Values
The examples in this article use reflection to show all possible values of the SplitButton parameters. In a real-world scenario, there are two options to set the desired parameter values:
- Use the static class members in the
ThemeConstants.SplitButtonnamespace. This is the easier and recommended approach. - Set the actual string values directly.
The following two configurations will produce the same result.
Two ways to set SplitButton appearance parameters
FillMode
The FillMode parameter controls if the SplitButton will have a background and borders. The setting also affects the component's hover state. To set the parameter value, use the string members of the static class ThemeConstants.SplitButton.FillMode.
FillMode Class Member | String Value |
|---|---|
Solid (default) | "solid" |
Flat | "flat" |
Outline | "outline" |
Link | "link" |
SplitButton FillMode example
Rounded
The Rounded parameter affects the SplitButton border-radius CSS styles. To set the parameter value, use the string members of the static class ThemeConstants.SplitButton.Rounded.
Rounded Class Member | String Value |
|---|---|
Small | "sm" |
Medium (default) | "md" |
Large | "lg" |
Full | "full" |
SplitButton Rounded example
Size
The Size parameter can change some SplitButton dimensions, such as height, margins or paddings. Possible values are the string members of the static class ThemeConstants.SplitButton.Size.
Size Class Member | String Value |
|---|---|
Small | "sm" |
Medium (default) | "md" |
Large | "lg" |
SplitButton Size example
ThemeColor
The ThemeColor parameter sets the SplitButton's background and text color from a set of predefined options. Use the string members of the static class ThemeConstants.SplitButton.ThemeColor.
ThemeColor Class Member | String Value |
|---|---|
Base (default) | "base" |
Primary | "primary" |
Secondary | "secondary" |
Tertiary | "tertiary" |
Info | "info" |
Success | "success" |
Warning | "warning" |
Error | "error" |
Inverse | "inverse" |
SplitButton ThemeColor example
ThemeBuilder
To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.
ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.