Home Docs

ToggleButton

ToggleButton is a type of button that stores and shows a status representing the toggle state of the component.

Usage

Basic
See the basic usage of a BitToggleButton in action.

<BitToggleButton>Microphone</BitToggleButton>
Variant
The BitToggleButton offers three variants: Fill (default), Outline, and Text.



Disabled:

<BitToggleButton Variant="BitVariant.Fill">Fill</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline">Outline</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text">Text</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" IsEnabled="false">Fill</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" IsEnabled="false">Outline</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" IsEnabled="false">Text</BitToggleButton>
Texts
You can provide the text of the BitToggleButton in different ways.

Text:





On/Off Texts:

<BitToggleButton Text="Microphone" />

<BitToggleButton OnText="Muted" OffText="Unmuted" />
Icons
Checkout different ways of utilizing Icons in BitToggleButton.

IconName:





On/Off IconNames:





No text:




IconOnly:

<BitToggleButton Text="Microphone" IconName="@BitIconName.Microphone" />

<BitToggleButton OnText="Muted" OnIconName="@BitIconName.MicOff"
                 OffText="Unmuted" OffIconName="@BitIconName.Microphone" />

<BitToggleButton IconName="@BitIconName.Microphone" />
<BitToggleButton OnIconName="@BitIconName.MicOff" OffIconName="@BitIconName.Microphone" />

<BitToggleButton IconOnly IconName="@BitIconName.Microphone" Text="Microphone" />
<BitToggleButton IconOnly
                 OnText="Muted" OnIconName="@BitIconName.MicOff" 
                 OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
Binding
Explore default checked state, two-way binding, and handling change events for a customizable user experience.

DefaultIsChecked:





Two-way bound:







OnChange:



Check status: False
<BitToggleButton DefaultIsChecked="true"
                 OnText="Muted" OnIconName="@BitIconName.MicOff"
                 OffText="Unmuted" OffIconName="@BitIconName.Microphone" />

<BitToggleButton @bind-IsChecked="twoWayBoundValue"
                 Text="@(twoWayBoundValue ? "Muted" : "Unmuted")"
                 IconName="@(twoWayBoundValue ? BitIconName.MicOff : BitIconName.Microphone)" />
<BitCheckbox Label="Checked Toggle Button" @bind-Value="twoWayBoundValue" />

<BitToggleButton OnChange="v => onChangeValue = v"
                 OnText="Muted" OnIconName="@BitIconName.MicOff"
                 OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
<div>Check status: @onChangeValue</div>
@code {
    private bool twoWayBoundValue;
    private bool onChangeValue;
}
Templates
Here are some examples of customizing the BitToggleButton content.

<style>
    .custom-template {
        gap: 0.5rem;
        display: flex;
        align-items: center;
    }
</style>


<BitToggleButton>
    <div class="custom-template">
        <BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />
        <span>Custom template</span>
        <BitRollerLoading CustomSize="20" Color="BitColor.Tertiary" />
    </div>
</BitToggleButton>
Events
Managing BitToggleButton click event (OnClick).

<BitToggleButton OnClick="() => clickCounter++">
    Click me (@clickCounter)
</BitToggleButton>
@code {
    private int clickCounter;
}
Size
Varying sizes for BitToggleButton tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.


Small:







Medium:







Large:




<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" Text="Microphone" />
<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" Text="Microphone" />
<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" Text="Microphone" />
<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />


<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" Text="Microphone" />
<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" Text="Microphone" />
<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" Text="Microphone" />
<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />


<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" Text="Microphone" />
<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" Text="Microphone" />
<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />
<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" Text="Microphone" />
<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />
Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.

















<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Primary">Primary</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Primary">Primary</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Primary">Primary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Secondary">Secondary</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Secondary">Secondary</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Secondary">Secondary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Tertiary">Tertiary</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Tertiary">Tertiary</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Tertiary">Tertiary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Info">Info</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Info">Info</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Info">Info</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Success">Success</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Success">Success</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Success">Success</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Warning">Warning</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Warning">Warning</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Warning">Warning</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Error">Error</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Error">Error</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Error">Error</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>
<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>
<BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>
FixedColor
FixedColor parameter preserves the foreground color between hovering and focused states.

<BitToggleButton Color="BitColor.TertiaryBackground" FixedColor 
                 OnIconName="@BitIconName.MicOff" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Color="BitColor.TertiaryBackground" FixedColor 
                 OnText="Muted" OnIconName="@BitIconName.MicOff"
                 OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style & Class:



Styles & Classes:

<style>
    .custom-class {
        border-radius: 1rem;
        border-color: blueviolet;
        transition: background-color 1s;
        background: linear-gradient(90deg, magenta, transparent) blue;
    }

    .custom-class:hover {
        border-color: magenta;
        background-color: magenta;
    }


    .custom-root {
        border: none;
        color: blueviolet;
        background: transparent;
    }

    .custom-text {
        position: relative;
    }

    .custom-root:hover .custom-text {
        color: darkviolet;
    }

    .custom-text::after {
        content: '';
        left: 0;
        width: 0;
        height: 2px;
        bottom: -6px;
        position: absolute;
        transition: 0.3s ease;
        background: linear-gradient(90deg, #ff00cc, #3333ff);
    }

    .custom-icon {
        color: hotpink;
    }

    .custom-checked {
        border: none;
        background-color: transparent;
    }

    .custom-checked .custom-text::after {
        width: 100%;
    }

    .custom-checked .custom-icon {
        color: hotpink;
    }
</style>


<BitToggleButton Style="background-color: transparent; border-color: blueviolet; color: blueviolet;"
                 Variant="BitVariant.Outline"
                 OnText="Styled Button: Muted" OnIconName="@BitIconName.MicOff"
                 OffText="Styled Button: Unmuted" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Class="custom-class"
                 OnText="Classed Button: Muted" OnIconName="@BitIconName.MicOff" 
                 OffText="Classed Button: Unmuted" OffIconName="@BitIconName.Microphone" />


<BitToggleButton OnText="Styled Button: Muted" OnIconName="@BitIconName.MicOff"
                 OffText="Styled Button: Unmuted" OffIconName="@BitIconName.Microphone"
                 Styles="@(new() { Root = "--toggle-background: pink; background: var(--toggle-background); border: none;",
                                   Checked = "--toggle-background: peachpuff;",
                                   Icon = "color: red;",
                                   Text = "color: tomato;" })" />

<BitToggleButton Variant="BitVariant.Text"
                 OnText="Classed Button: Muted" OnIconName="@BitIconName.MicOff"
                 OffText="Classed Button: Unmuted" OffIconName="@BitIconName.Microphone"
                 Classes="@(new() { Root = "custom-root",
                                    Checked = "custom-checked",
                                    Container = "custom-content",
                                    Icon = "custom-icon",
                                    Text = "custom-text" })" />
RTL
Use BitToggleButton in right-to-left (RTL).

<BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Fill"
                 OnText="صدا قطع" OnIconName="@BitIconName.MicOff"
                 OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Outline"
                 OnText="صدا قطع" OnIconName="@BitIconName.MicOff"
                 OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Text"
                 OnText="صدا قطع" OnIconName="@BitIconName.MicOff"
                 OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

API

BitToggleButton parameters
Name
Type
Default value
Description
AllowDisabledFocus bool false Whether the toggle button can have focus in disabled mode.
AriaDescription string? null Detailed description of the toggle button for the benefit of screen readers.
AriaHidden bool false If true, add an aria-hidden attribute instructing screen readers to ignore the element.
ChildContent RenderFragment? null The content of the toggle button.
Classes BitToggleButtonClassStyles? null Custom CSS classes for different parts of the toggle button.
Color BitColor? null The general color of the toggle button.
DefaultIsChecked bool? null Default value of the IsChecked parameter.
FixedColor bool false Preserves the foreground color of the toggle button through hover and focus.
IconName string? null The icon name that renders inside the toggle button.
IconOnly bool false Determines that only the icon should be rendered and changes the styles accordingly.
IsChecked bool false Determines if the toggle button is in the checked state.
OnChange EventCallback<bool> Callback for when the IsChecked value has changed.
OnClick EventCallback<MouseEventArgs> Callback for when the toggle button is clicked.
OffIconName string? The icon of the toggle button when it is not checked.
OffText string? The text of the toggle button when it is not checked.
OffTitle string? The title of the toggle button when it is not checked.
OnIconName string? The icon of the toggle button when it is checked.
OnText string? The text of the toggle button when it is checked.
OnTitle string? The title of the toggle button when it is checked.
Size BitSize? null The size of the toggle button.
Styles BitToggleButtonClassStyles? null Custom CSS styles for different parts of the toggle button.
Text string? null The text of the toggle button.
Title string? null The title to show when the mouse is placed on the toggle button.
Variant BitVariant? null The visual variant of the toggle button.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitToggleButtonClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitToggleButton.
Checked string? null Custom CSS classes/styles for the checked state of the BitToggleButton.
Icon string? null Custom CSS classes/styles for the icon element of the BitToggleButton.
Text string? null Custom CSS classes/styles for the text element of the BitToggleButton.
BitColor enum
Name
Value
Description
Primary 0 Info Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.
BitSize enum
Name
Value
Description
Small 0 The small size button.
Medium 1 The medium size button.
Large 2 The large size button.
BitVariant enum
Name
Value
Description
Fill 0 Fill styled variant.
Outline 1 Outline styled variant.
Text 2 Text styled variant.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page