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.
Using the Variant parameter and its value of type BitVariant enum:




Title
The Title parameter sets a tooltip that appears when hovering over the button.

Icon
BitButton has an icon slot that, if specified, renders an icon at the start (default) or end of the component using IconPosition.
Using the IconPosition parameter and BitIconPosition enum as its value:









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

Re-clickable AutoLoading click count: 0
Loading Label
Explore customizing the loading label and its different positions, including start, end, bottom, and top.
Using the LoadingLabelPosition parameter and its value of type BitLabelPosition enum:


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.
The actual rel attribute value is generated using the provided BitLinkRels and Href value.

Open bitplatform.dev with a rel attribute (nofollow)
Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
Float & Draggable
Demonstrates a floating button with adjustable float modes and customizable positions.
Using the FloatPosition parameter and its value of type BitPosition enum:




FloatAbsolute & Draggable:

Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and inspirations will be built. Soon, these lines will transform into narratives that provoke thought, spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty in potential the quiet magic of beginnings, where everything is still to come, and the possibilities are boundless. This space is yours to craft, yours to shape, yours to bring to life.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new—an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
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.
Using the ButtonType parameter and its value of type BitButtonType enum:



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.
Using the Size parameter and its value of type BitSize enum:

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.
Using the Color parameter and its value of type BitColor enum:

Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
Using the Color parameter and its value of type BitColor enum:


















External Icons
Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon parameter.
See the BitIconInfo section in the parameters table for usage.


FontAwesome:











Bootstrap:







Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Using the Styles and Classes parameters and their value of BitButtonClassStyles class:


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 Keeps the disabled button focusable by not forcing a negative tabindex when IsEnabled is false.
AriaDescription string? null Detailed description of the button for the benefit of screen readers (rendered into aria-describedby).
AriaHidden bool false If true, adds an aria-hidden attribute instructing screen readers to ignore the button.
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 type of the button element; defaults to submit inside an EditForm otherwise 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.
Draggable bool false Makes the Float/FloatAbsolute button draggable on the page.
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.
Icon BitIconInfo? null Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.
IconName string? null Gets or sets the name of the icon to display from the built-in Fluent UI icons.
IconOnly bool false Determines that only the icon should be rendered.
IconPosition BitIconPosition? null Gets or sets the position of the icon relative to the component's content.
IconUrl string? null The url of the custom icon to render inside the button.
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> Raised when the button is clicked; receives a bool indicating 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.
Rel BitLinkRels? null Sets the rel attribute for link-rendered buttons when Href is a non-anchor URL; ignored for empty or hash-only hrefs.
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 Sets the preset size for typography and padding of the button.
Styles BitButtonClassStyles? null Custom inline 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 Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.
BitButtonClassStyles properties
Defines per-part CSS class/style values for BitButton.
Name
Type
Default value
Description
Root string? null Custom class or style applied to the root element.
Icon string? null Custom class or style applied to the icon element.
Container string? null Custom class or style applied to the internal container.
Primary string? null Custom class or style applied to the primary section.
Secondary string? null Custom class or style applied to the secondary section.
LoadingContainer string? null Custom class or style applied to the loading container.
Spinner string? null Custom class or style applied to the spinner element.
LoadingLabel string? null Custom class or style applied to the loading label.
BitIconInfo properties
Name
Type
Default value
Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.
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).
BitIconPosition enum
Name
Value
Description
Start 0 Icon renders before the content (default).
End 1 Icon renders after the content.
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.
BitPosition enum
Name
Value
Description
TopLeft 0
TopCenter 1
TopRight 2
TopStart 3
TopEnd 4
CenterLeft 5
Center 6
CenterRight 7
CenterStart 8
CenterEnd 9
BottomLeft 10
BottomCenter 11
BottomRight 12
BottomStart 13
BottomEnd 14
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