Home Docs

Button




BitButton triggers an action or navigates when the user activates it. It renders a native button, or an anchor when an Href is provided, and offers Fill, Outline, and Text variants across a full palette of semantic colors and sizes. It supports start/end icons, an optional secondary line of text, built-in loading and auto-loading states that keep the button's size and accessible name, EditForm submission, and accessibility-first defaults such as focusable disabled buttons and automatic rel='noopener' on external links.

Usage

Basic

The simplest usage: place your label as the child content to render a Fill (default) primary button.

Primary & Secondary

BitButton can show two lines of text: the primary content (the child content) and an optional secondary line set via the SecondaryText parameter, useful for compound buttons that describe the action beneath its label.


Variant

BitButton offers three style variants to convey different levels of emphasis: Fill (default, a solid filled button for primary actions), Outline (a bordered button for secondary actions), and Text (a borderless button for the lowest-emphasis actions).
Using the Variant parameter and its value of type BitVariant enum:




Disabled

By default, a disabled button remains focusable and discoverable by screen readers (rendering the aria-disabled attribute instead of the native disabled attribute), preserving a consistent tab order while its action is suppressed.
Setting AllowDisabledFocus to false renders the native disabled attribute and removes the button from the tab order.

Title

The Title parameter sets the native tooltip that appears when the pointer hovers over the button.

Icon

BitButton has an icon slot that renders an icon alongside the label, or on its own for an icon-only button. Set a built-in Fluent icon with IconName, or render a custom image with IconUrl. The icon sits at the start by default and can move to the end via the IconPosition parameter.
Using the IconPosition parameter and BitIconPosition enum as its value:









Icon only

Set IconOnly to render only the icon without any text, producing a compact square button that is common in toolbars and command bars.
An icon has no textual content, so always provide an AriaLabel to give the button an accessible name for screen readers.

Loading

The IsLoading parameter puts the button into a loading state that shows a spinner while an operation is in progress. The button keeps its original size and accessible name, and blocks further clicks so the action can't be triggered twice.
With AutoLoading, the button manages this state for you: it automatically enters the loading state while awaiting the OnClick handler and leaves it when the handler completes. Add Reclickable to allow clicking again during that loading state.






AutoLoading:

AutoLoading click count: 0

Re-clickable AutoLoading click count: 0

Loading Label

Set LoadingLabel to show a text next to the spinner during the loading state, and place it relative to the spinner (start, end, top, or bottom) with LoadingLabelPosition.
Using the LoadingLabelPosition parameter and its value of type BitLabelPosition enum:


Href

When the Href parameter is set, BitButton renders a real anchor (<a>) element instead of a <button>, so it navigates like a genuine link while keeping the same look. Control where it opens with the Target parameter.
When the Target is set to _blank and no Rel is provided, rel="noopener" gets added automatically to protect against reverse-tabnabbing.

Open bitplatform.dev
Go to bitplatform GitHub


Using the Download parameter, the browser downloads the linked resource instead of navigating to it, using the provided value as the file name:

Download the bit logo

Rel

For link-rendered buttons, the Rel parameter sets the anchor's rel attribute, which describes the relationship between the current page and the linked one (for example nofollow or noreferrer).
The actual rel attribute value is generated from the provided BitLinkRels flags and is ignored for empty or hash-only hrefs.

Open bitplatform.dev with a rel attribute (nofollow)
Open bitplatform.dev with a rel attribute (nofollow & noreferrer)

Float & Draggable

A floating button is pinned to a corner or edge so it stays in view. Use Float to position it relative to the viewport, or FloatAbsolute to position it relative to its container. Choose the anchor with FloatPosition, adjust the spacing with FloatOffset, and add Draggable to let users move it around.
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

The ButtonType parameter sets the native button type: Submit to submit the surrounding form, Reset to clear its inputs, and Button for a plain action. Inside an EditForm the type defaults to Submit; otherwise it defaults to Button.
Using the ButtonType parameter and its value of type BitButtonType enum:





Using the FormId parameter, a submit button placed outside of the form element can still submit it:


Templates

For full control over the button's content, replace the primary and secondary sections with your own markup using the PrimaryTemplate and SecondaryTemplate render fragments (or simply pass child content).







Use the LoadingTemplate render fragment to replace the default spinner and label with your own loading indicator and message.

Events

The OnClick event is raised when the button is activated (by pointer, Enter, or Space). It is suppressed while the button is disabled or loading.



Using the StopPropagation parameter, the click event stops bubbling up to the parent elements:

Button clicks: 0, Parent clicks: 0


Using the public FocusAsync method, the button can receive focus programmatically:

Size

The Size parameter sets a preset size (Small, Medium, or Large) that adjusts the button's typography and padding, letting you establish a clear visual hierarchy between actions.
Using the Size parameter and its value of type BitSize enum:

Small:








Medium:








Large:





FullWidth

The FullWidth parameter expands the button to occupy 100% of its container's width, which is handy for forms and mobile layouts.

FixedColor

The FixedColor flag keeps the button's foreground (content) color fixed through its hover and focus states, instead of shifting it as usual. This is useful when the button's color must stay constant against a specific background.

Color

The Color parameter applies a semantic color (Primary is the default) so the button communicates the nature of its action, such as Success, Warning, or Error. Each color works across all three variants, and the palette also includes background, foreground, and border color sets.
Using the Color parameter and its value of type BitColor enum:


















External Icons

Beyond the built-in Fluent icons, the Icon parameter renders icons from external libraries such as FontAwesome and Bootstrap Icons. Pass their CSS classes directly, or use the BitIconInfo helpers (Css, Fa, Bi) to build them.
See the BitIconInfo section in the parameters table for usage.


FontAwesome:











Bootstrap:







Style & Class

Beyond the root Style and Class, the Styles and Classes parameters target the button's individual parts (root, icon, primary and secondary sections, loading container, spinner, and loading label) so you can restyle each piece precisely.
Using the Styles and Classes parameters and their value of BitButtonClassStyles class:


Component's Style & Class:




Styles & Classes:

RTL

Set the Dir parameter to Rtl to lay the button out for right-to-left languages; the icon, primary and secondary text, and loading indicator all mirror accordingly.




API

BitButton parameters

Name Type Default value Description
AllowDisabledFocus bool true Keeps the disabled button focusable and discoverable by screen readers, rendering aria-disabled instead of the native disabled attribute when IsEnabled is false, preserving a consistent tab order. Set it to false to render the native disabled attribute and remove the button from the tab order.
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.
AutoFocus bool false If true, the button automatically receives focus when the page renders (rendered as the autofocus attribute).
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.
Download string? null The value of the download attribute of the link rendered by the button when Href is provided. Instructs the browser to download the linked resource instead of navigating to it, using the provided value as the file name.
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 BitPosition? null Specifies the position of the floating button.
FormId string? null The id of the form element that the button is associated with (rendered as the form attribute). Allows a submit/reset button to be placed outside of its form element.
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 while the button is in the loading state.
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.
StopPropagation bool false If true, stops the click event from bubbling up to the parent elements.
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). When set to _blank and no Rel is provided, rel="noopener" gets added automatically for security.
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.
HiddenContent string? null Custom class or style applied to the wrapper of the content that keeps the button size while it is hidden in the loading state.
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