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

Re-clickable 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 & Draggable
Demonstrates a floating button with adjustable float modes and customizable positions.




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.



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.
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.
IconName string? null The name of the icon to render inside the button.
IconOnly bool false Determines that only the icon should be rendered.
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> 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.

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