- bit BlazorUI
Home Docs

CompoundButton

CompoundButton is a button containing a secondary text describing the main action of the button.

Usage

Basic
The CompoundButton 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.

LinkThis is the secondary text
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.

LinkThis is the secondary text
Text button
Text buttons are best suited for understated actions, serving as a less prominent choice in various interface elements.

LinkThis is the secondary text
Icon
BitCompoundButton has an icon slot that, if specified, renders an icon that can be set at the start or end of component using IconPosition.

Events
Managing button click event (OnClick).

Button Type
BitCompoundButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes.



Template
Here are some examples of customizing the button content.

Color
Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.

Size
Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.

ClassStyles
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

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

BitCompoundButton parameters
Name
Type
Default value
Description
AllowDisabledFocus bool true Whether the BitCompoundButton can have focus in disabled mode.
AriaDescription string? null Detailed description of the BitCompoundButton for the benefit of screen readers.
AriaHidden bool false If true, adds an aria-hidden attribute instructing screen readers to ignore the element.
ButtonStyle BitButtonStyle BitButtonStyle.Primary The style of the BitCompoundButton.
ButtonType BitButtonType null The value of the type attribute of the button rendered by the BitCompoundButton.
ChildContent RenderFragment? null The content of primary section of the BitCompoundButton.
Classes BitCompoundButtonClassStyles? null Custom CSS classes for different parts of the BitCompoundButton.
Color BitColor null The color of the button.
Href string? null The value of the href attribute of the link rendered by the BitCompoundButton. If provided, the component will be rendered as an anchor.
IconName string? null The icon to show inside the BitCompoundButton.
IconPosition BitButtonIconPosition BitButtonIconPosition.Start Specifies Icon position which can be rendered either on start or end of the component.
OnClick EventCallback<MouseEventArgs> The callback for the click event of the BitCompoundButton.
PrimaryTemplate RenderFragment? null The content of primary section of the BitCompoundButton (alias of the ChildContent).
SecondaryText string? null The text of the secondary section of the BitCompoundButton.
SecondaryTemplate RenderFragment? null The RenderFragment for the secondary section of the BitCompoundButton.
Size BitButtonSize null The size of button, Possible values: Small | Medium | Large.
Styles BitCompoundButtonClassStyles? null Custom CSS styles for different parts of the BitCompoundButton.
Target string? null Specifies target attribute of the link when the BitComponentButton renders as an anchor.
Title string? null The tooltip to show when the mouse is placed on the 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.
BitCompoundButtonClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitCompoundButton.
Icon string? null Custom CSS classes/styles for the icon of the BitCompoundButton.
TextContainer string? null Custom CSS classes/styles for the text (Primary and Secoundary) container of the BitCompoundButton.
Primary string? null Custom CSS classes/styles for the primary section of the BitCompoundButton.
Secondary string? null Custom CSS classes/styles for the secondary section of the BitCompoundButton.
BitButtonStyle enum
Name
Value
Description
Primary 0 The button with white text on a blue background.
Standard 1 The button with black text on a white background.
BitButtonType enum
Name
Value
Description
Button 0 The button is a clickable button.
Submit 1 The button is a submit button (submits form-data).
Reset 2 The button is a reset button (resets the form-data to its initial values).
BitColor enum
Name
Value
Description
Info 0 Info styled Button.
Success 1 Success styled Button.
Warning 2 Warning styled Button.
SevereWarning 3 Severe Warning styled Button.
Error 4 Error styled Button.
BitButtonSize enum
Name
Value
Description
Small 0 The small size button.
Medium 1 The medium size button.
Large 2 The large size button.
BitButtonIconPosition enum
Name
Value
Description
Start 0 Renders the icon at the start of component.
End 1 Renders the icon at the end of component.
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.