- 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
Primary & Secondary

Variant
The Button offers three style variants: Fill (default), Outline, and Text.




Icon
BitButton has an icon slot that, if specified, renders an icon that can be set at the start (default) or revered positioned at the end of component.






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






AutoLoading:

AutoLoading click count: 0

Reclickable AutoLoading click count: 0
Loading Label
Explore customizing the loading label and its different positions, including start, end, bottom, and top.


Href
Use BitButton as a hyperlink to external URLs, opening either in a new tab or the same tab.

Open bitplatform.dev
Go to bitplatform GitHub
Rel
Use BitButton as a hyperlink to external URLs, with a rel attribute.

Open bitplatform.dev with a rel attribute (nofollow)
Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
Float
Demonstrates a floating button with adjustable float modes and customizable positions.




FloatAbsolute:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.
Suspendisse blandit erat ac lobortis pulvinar. Donec nunc leo, tempus sit amet accumsan in, sagittis sed odio. Pellentesque tristique felis sed purus pellentesque, ac dictum ex fringilla. Integer a tincidunt eros, non porttitor turpis. Sed gravida felis massa, in viverra massa aliquam sit amet. Etiam vitae dolor in velit sodales tristique id nec turpis. Proin sit amet urna sollicitudin, malesuada enim et, lacinia mi. Fusce nisl massa, efficitur sit amet elementum convallis, porttitor vel turpis. Fusce congue dui sit amet mollis pulvinar. Suspendisse vulputate leo quis nunc tincidunt, nec dictum risus congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.
Suspendisse blandit erat ac lobortis pulvinar. Donec nunc leo, tempus sit amet accumsan in, sagittis sed odio. Pellentesque tristique felis sed purus pellentesque, ac dictum ex fringilla. Integer a tincidunt eros, non porttitor turpis. Sed gravida felis massa, in viverra massa aliquam sit amet. Etiam vitae dolor in velit sodales tristique id nec turpis. Proin sit amet urna sollicitudin, malesuada enim et, lacinia mi. Fusce nisl massa, efficitur sit amet elementum convallis, porttitor vel turpis. Fusce congue dui sit amet mollis pulvinar. Suspendisse vulputate leo quis nunc tincidunt, nec dictum risus congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ligula quis orci accumsan pharetra. Fusce mattis sit amet enim vitae imperdiet. Maecenas hendrerit sapien nisl, quis consectetur mi bibendum vel. Pellentesque vel rhoncus quam, non bibendum arcu. Vivamus euismod tellus non felis finibus, dictum finibus eros elementum. Vivamus a massa sit amet leo volutpat blandit at vel tortor. Praesent posuere, nulla eu tempus accumsan, nibh elit rhoncus mauris, eu semper tellus risus et nisi. Duis felis ipsum, luctus eget ultrices sit amet, scelerisque quis metus.
Suspendisse blandit erat ac lobortis pulvinar. Donec nunc leo, tempus sit amet accumsan in, sagittis sed odio. Pellentesque tristique felis sed purus pellentesque, ac dictum ex fringilla. Integer a tincidunt eros, non porttitor turpis. Sed gravida felis massa, in viverra massa aliquam sit amet. Etiam vitae dolor in velit sodales tristique id nec turpis. Proin sit amet urna sollicitudin, malesuada enim et, lacinia mi. Fusce nisl massa, efficitur sit amet elementum convallis, porttitor vel turpis. Fusce congue dui sit amet mollis pulvinar. Suspendisse vulputate leo quis nunc tincidunt, nec dictum risus congue.

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.



Templates
Here are some examples of customizing the button content.





Utilize the "LoadingTemplate" feature to design personalized loading indicators and messages, providing a unique visual experience during loading states.

Events
Managing button click event (OnClick).

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

Small:






Medium:






Large:



FullWidth
Setting the FullWidth makes the button occupy 100% of its container's width.

FixedColor
FixedColor flag parameter makes the foreground color to be fixed regardless of its hovering state.

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


















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 BitButton in right-to-left (RTL).




API

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, adds an aria-hidden attribute instructing screen readers to ignore the element.
AutoLoading bool false If true, enters the loading state automatically while awaiting the OnClick event and prevents subsequent clicks by default.
ButtonType BitButtonType? null The value of the type attribute of the button.
ChildContent RenderFragment? null The content of primary section of the button.
Classes BitButtonClassStyles? null Custom CSS classes for different parts of the button.
Color BitColor? null The general color of the button.
FixedColor bool false Preserves the foreground color of the button through hover and focus.
Float bool false Enables floating behavior for the button, allowing it to be positioned relative to the viewport.
FloatAbsolute bool false Enables floating behavior for the button, allowing it to be positioned relative to its container.
FloatOffset string? null Specifies the offset of the floating button.
FloatPosition bool false Specifies the position of the floating button.
FullWidth bool false Expand the button width to 100% of the available width.
Href string? null The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button.
IconName string? null The name of the icon to render inside the button.
IconOnly bool false Determines that only the icon should be rendered.
IsLoading bool false Determines whether the button is in loading mode or not.
LoadingLabel string? null The loading label text to show next to the spinner icon.
LoadingLabelPosition BitLabelPosition BitLabelPosition.End The position of the loading Label in regards to the spinner icon.
LoadingTemplate RenderFragment? null The custom template used to replace the default loading text inside the button in the loading state.
OnClick EventCallback<bool> The callback for the click event of the button with a bool argument passing the current loading state.
PrimaryTemplate RenderFragment? The content of the primary section of the button (alias of the ChildContent).
Reclickable bool false Enables re-clicking in loading state when AutoLoading is enabled.
ReversedIcon bool false Reverses the positions of the icon and the main content of the button.
Rel BitLinkRel? null If Href provided, specifies the relationship between the current document and the linked document.
SecondaryText string? null The text of the secondary section of the button.
SecondaryTemplate RenderFragment? The custom template for the secondary section of the button.
Size BitSize? null The size of the button.
Styles BitButtonClassStyles? null Custom CSS styles for different parts of the button.
Target string? null Specifies target attribute of the link when the button renders as an anchor (by providing the Href parameter).
Title string? null The tooltip to show when the mouse is placed on the button.
Variant BitVariant? null The visual variant of 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.
Container string? null Custom CSS classes/styles for the internal container of the BitButton.
Primary string? null Custom CSS classes/styles for the primary section of the BitButton.
Secondary string? null Custom CSS classes/styles for the secondary section of the BitButton.
LoadingContainer string? null Custom CSS classes/styles for the loading 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 loading label section of the BitButton.
BitVariant enum
Name
Value
Description
Fill 0 Fill styled variant.
Outline 1 Outline styled variant.
Text 2 Text styled variant.
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.
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).
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.
BitLinkRel enum
Name
Value
Description
Alternate 1 Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror)
Author 2 Provides a link to the author of the document.
Bookmark 4 Permanent URL used for bookmarking.
External 8 Indicates that the referenced document is not part of the same site as the current document.
Help 16 Provides a link to a help document.
License 32 Provides a link to licensing information for the document.
Next 64 Provides a link to the next document in the series.
NoFollow 128 Links to an unendorsed document, like a paid link. ("NoFollow" is used by Google, to specify that the Google search spider should not follow that link)
NoOpener 256 Requires that any browsing context created by following the hyperlink must not have an opener browsing context.
NoReferrer 512 Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink.
Prev 1024 The previous document in a selection.
Search 2048 Links to a search tool for the document.
Tag 4096 A tag (keyword) for the current document.
BitPosition enum
Name
Value
Description
TopLeft 0
TopCenter 1
TopRight 2
CenterLeft 3
Center 4
CenterRight 5
BottomLeft 6
BottomCenter 7
BottomRight 8
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.
  • On this page