DxButtonGroupItem.RenderStyleMode Property

Specifies the item’s color filling type.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

[DefaultValue(null)]
[Parameter]
public ButtonRenderStyleMode? RenderStyleMode { get; set; }

Property Value

Type	Default	Description
Nullable<ButtonRenderStyleMode>	null	An enumeration value.

Available values:

Name	Description
Contained	The button is filled with the style color.
Outline	The button’s text and borders are colored.
Text	The button’s text is colored.

Remarks

The <DxButtonGroup> component allows you to apply predefined styles to all button group items or to an individual item. You can use the following properties:

DxButtonGroup.RenderStyle | DxButtonGroupItem.RenderStyle

Specify a button’s predefined style.

DxButtonGroup.RenderStyleMode | DxButtonGroupItem.RenderStyleMode

Specify a button’s color filling type.

Note

Individual item settings have priority over component settings.

<div>
    <div style="padding-bottom:5px;">
        <div><b>Contained Mode:</b></div>
        <DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Contained">
            <Items>
                <DxButtonGroupItem Text="Primary" />
                <DxButtonGroupItem Text="Secondary" RenderStyle="ButtonRenderStyle.Secondary" />
                <DxButtonGroupItem Text="Info" RenderStyle="ButtonRenderStyle.Info" />
                <DxButtonGroupItem Text="Link" RenderStyle="ButtonRenderStyle.Link" />
                <DxButtonGroupItem Text="Success" RenderStyle="ButtonRenderStyle.Success" />
                <DxButtonGroupItem Text="Warning" RenderStyle="ButtonRenderStyle.Warning" />
                <DxButtonGroupItem Text="Danger" RenderStyle="ButtonRenderStyle.Danger" />
            </Items>
        </DxButtonGroup>
    </div>
    <div style="padding-bottom:5px;">
        <div><b>Outline Mode:</b></div>
        <DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Outline">
            <Items>
                <DxButtonGroupItem Text="Primary" />
                <DxButtonGroupItem Text="Secondary" RenderStyle="ButtonRenderStyle.Secondary" />
                <DxButtonGroupItem Text="Info" RenderStyle="ButtonRenderStyle.Info" />
                <DxButtonGroupItem Text="Link" RenderStyle="ButtonRenderStyle.Link" />
                <DxButtonGroupItem Text="Success" RenderStyle="ButtonRenderStyle.Success" />
                <DxButtonGroupItem Text="Warning" RenderStyle="ButtonRenderStyle.Warning" />
                <DxButtonGroupItem Text="Danger" RenderStyle="ButtonRenderStyle.Danger" />
            </Items>
        </DxButtonGroup>
    </div>
    <div>
        <div><b>Text Mode:</b></div>
        <DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Text">
            <Items>
                <DxButtonGroupItem Text="Primary" />
                <DxButtonGroupItem Text="Secondary" RenderStyle="ButtonRenderStyle.Secondary" />
                <DxButtonGroupItem Text="Info" RenderStyle="ButtonRenderStyle.Info" />
                <DxButtonGroupItem Text="Link" RenderStyle="ButtonRenderStyle.Link" />
                <DxButtonGroupItem Text="Success" RenderStyle="ButtonRenderStyle.Success" />
                <DxButtonGroupItem Text="Warning" RenderStyle="ButtonRenderStyle.Warning" />
                <DxButtonGroupItem Text="Danger" RenderStyle="ButtonRenderStyle.Danger" />
            </Items>
        </DxButtonGroup>
    </div>
</div>