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.
Variant
The BitToggleButton offers three variants: Fill (default), Outline, and Text.
Disabled:
Texts
You can provide the text of the BitToggleButton in different ways.
Text:
On/Off Texts:
Icons
Checkout different ways of utilizing Icons in BitToggleButton.
IconName:
On/Off IconNames:
No text:
IconOnly:
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
Templates
Here are some examples of customizing the BitToggleButton content.
Events
Managing BitToggleButton click event (OnClick).
Size
Varying sizes for BitToggleButton tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
Small:
Medium:
Large:
Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
FixedColor
FixedColor parameter preserves the foreground color between hovering and focused states.
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:
RTL
Use BitToggleButton in right-to-left (RTL).
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