- bit BlazorUI
Home Docs

Button

Buttons enable users to take actions with a single tap. They're commonly used in forms, dialog panels, and specialized for tasks like navigation or repeated actions.

Usage

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

Link
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.

Link
Text button
Text buttons are best suited for understated actions, serving as a less prominent choice in various interface elements.

Link
Icon
BitButton 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).

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.

Custom content
Here are some examples of customizing the button content.

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



Loading button
Demonstrate the dynamic loading state of buttons using the "IsLoading" property. Customize the loading label to provide users with feedback on ongoing processes.

LoadingLabel position
Explore different loading label positions for buttons, including start, end, bottom, and top. Customize the loading labels and positions to enhance the user experience.


LoadingTemplate
Utilize the "LoadingTemplate" feature to design personalized loading indicators and messages, providing a unique visual experience during loading 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


Implementation

BitButton parameters
Name
Type
Default value
Description
AllowDisabledFocus bool true Whether the button can have focus in disabled mode.
AriaDescription string? null Detailed description of the 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 the button, Possible values: Primary | Standard | Text.
ButtonType BitButtonType null The type of the button.
ChildContent RenderFragment? null The content of button, It can be Any custom tag or a text.
Classes BitButtonClassStyles? null Custom CSS classes for different parts of the BitButton.
Color BitColor null The color of the button.
Content RenderFragment? null Alias of ChildContent
Href string? null URL the link points to, if provided, button renders as an anchor.
IconName string null The icon to show inside the BitButton.
IconPosition BitButtonIconPosition BitButtonIconPosition.Start Specifies Icon position which can be rendered either on start or end of the component.
IsLoading bool false Determine whether the button is in loading mode or not.
LoadingLabel string? null The loading label to show next to the spinner.
LoadingLabelPosition BitLabelPosition BitLabelPosition.End The position of the loading Label in regards to the spinner animation.
LoadingTemplate RenderFragment? null Used to customize the content inside the Button in the Loading state.
OnClick EventCallback<MouseEventArgs> Callback for when the button clicked.
Size BitButtonSize null The size of button, Possible values: Small | Medium | Large.
Styles BitButtonClassStyles? null Custom CSS styles for different parts of the BitButton.
Target string? null If Href provided, specifies how to open the link.
Title string? null The title 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.
BitButtonClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitButton.
Icon string? null Custom CSS classes/styles for the icon of the BitButton.
LoadingContainer string? null Custom CSS classes/styles for the internal container of the BitButton.
Spinner string? null Custom CSS classes/styles for the spinner section of the BitButton.
LoadingLabel string? null Custom CSS classes/styles for the label section of the BitButton.
BitButtonStyle enum
Name
Value
Description
Primary 0 The button for primary actions that are high-emphasis.
Standard 1 The button for important actions that are medium-emphasis.
Text 2 The button for less-pronounced actions.
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.
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).
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.
BitLabelPosition enum
Name
Value
Description
Top 0 The label shows on the top of the button.
End 1 The label shows on the end of the button.
Bottom 2 The label shows on the bottom of the button.
Start 3 The label shows on the start of the button.
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.