ToggleButton
ToggleButton is a type of button that stores and shows a status representing the toggle state of the component.
Usage
Basic
The ToggleButton offers three style options: Primary (default), Standard, and Text.
Primary button
Primary buttons are attention-grabbing, featuring a filled appearance. They're designed for essential actions at the core of your application.
Standard button
Standard buttons offer a moderate level of emphasis, suitable for important actions that aren't central to the application. They serve as a middle ground between Text buttons and the more prominent Primary buttons, providing flexibility in emphasis.
Text button
Text buttons are best suited for understated actions, serving as a less prominent choice in various interface elements.
Controlled
Explore default checked state, two-way binding, and handling change events for a customizable user experience.
DefaultIsChecked:
Two-way bound:
OnChange:
Size
Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
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:
Visibility
You can control the display of buttons with three settings, 'Visible' for full display, 'Hidden' for concealing buttons without altering layout, and 'Collapsed' to remove the button and its space.
Visible: [ ]
Hidden: [ ]
Collapsed: [ ]
RTL
Implementation
BitToggleButton parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
AllowDisabledFocus | bool | true | 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. |
ButtonStyle | BitButtonStyle | BitButtonStyle.Primary | The style of toggle button, Possible values: Primary | Standard |
ChildContent | RenderFragment? | null | The content of BitToggleButton. |
Classes | BitToggleButtonClassStyles? | null | Custom CSS classes for different parts of the component. |
DefaultIsChecked | bool? | null | Default value of the IsChecked. |
IconName | string? | null | The icon that shows in the toggle button. |
IsChecked | bool | false | Determine if the toggle button is in checked state, default is true. |
OnChange | EventCallback<bool> | Callback that is called when the IsChecked value has changed. | |
OnClick | EventCallback<MouseEventArgs> | Callback for when the button clicked. | |
OffIconName | string? | The icon of the BitToggleButton when it is not checked. | |
OffText | string? | The text of the BitToggleButton when it is not checked. | |
OffTitle | string? | The title of the BitToggleButton when it is not checked. | |
OnIconName | string? | The icon of the BitToggleButton when it is checked. | |
OnText | string? | The text of the BitToggleButton when it is checked. | |
OnTitle | string? | The title of the BitToggleButton when it is checked. | |
Size | BitButtonSize | null | The size of button, Possible values: Small | Medium | Large. |
Styles | BitToggleButtonClassStyles? | null | Custom CSS styles for different parts of the component. |
Text | string? | null | The text of the BitToggleButton. |
Title | string? | null | The title to show when the mouse is placed on 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. |
Container | string? | null | Custom CSS classes/styles for the icon and label container of the BitToggleButton. |
Text | string? | null | Custom CSS classes/styles for the text element of the BitToggleButton. |
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. |