Home Docs

ActionButton

A lightweight and special type of button/link with icon-first styling, sized presets, and colorized text/icon support.

Usage

Basic
Explore the core features of the BitActionButton to get a feel for its baseline behavior.






IconPosition
Pick where the icon sits relative to the content: leave it at the start (default) or move it to the end without changing your content order.

Href
Turn ActionButton into a link and choose whether it opens in the current tab or a new one.

Open bitplatform.dev in a new tab
Go to bitplatform GitHub
Rel
Attach rel attribute values (e.g., nofollow, noreferrer) when using ActionButton as an external link.

Open bitplatform.dev with a rel attribute (nofollow)
Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
Template
Drop richer content inside ActionButton with a custom template (text plus spinner in this example).

ButtonType
See submit/reset/button types in action inside a validated form.



FullWidth
Stretch buttons or align content by combining FullWidth and an end-positioned icon.


Color
Preview the predefined colors of the BitActionButton for icon and text, from primary through warning/error, and the background/foreground/border sets.



















Size
Compare the Small, Medium, and Large presets to gauge typography and padding differences.

Style & Class
Override look-and-feel with inline styles or custom CSS classes applied to the root, icon, and content.

RTL
View ActionButton inside a right-to-left layout, respecting RTL direction and icon/text ordering.

API

BitActionButton parameters
Name
Type
Default value
Description
AllowDisabledFocus bool false Keeps the disabled action 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.
ButtonType BitButtonType null The type of the button element; defaults to submit inside an EditForm otherwise button.
ChildContent RenderFragment? null The custom body of the action button (text and/or any render fragment).
Classes BitActionButtonClassStyles? null Custom CSS classes for the root, icon, and content sections of the action button.
Color BitColor? null The general color of the button that applies to the icon and text of the action button.
EditContext EditContext? null The EditContext, which is set if the button is inside an EditForm. The value is coming from the cascading value provided by the EditForm.
FullWidth bool false Renders the action button in full width of its container with flex-start.
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 Fluent UI icon name to render inside the action button (e.g., BitIconName.AddFriend). Browse available names in BitIconName of the Bit.BlazorUI.Icons nuget package or the gallery: https://blazorui.bitplatform.dev/iconography.
IconOnly bool false Removes the container of the text and only renders the icon.
IconPosition BitIconPosition? null Sets whether the icon renders before or after the content.
OnClick EventCallback<MouseEventArgs> Raised when the action button is clicked (only when IsEnabled is true); receives MouseEventArgs.
Styles BitActionButtonClassStyles? null Custom inline styles for the root, icon, and content sections of the action button.
Rel BitLinkRel? null Sets the rel attribute for link-rendered buttons when Href is a non-anchor URL; ignored for empty or hash-only hrefs. The rel attribute specifies the relationship between the current document and the linked document.
Size BitSize? null Sets the preset size for typography and padding of the action 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.
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.
TabIndex string? null The value of the tabindex html attribute of the element.
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.
BitActionButtonClassStyles properties
Defines per-part CSS class/style values for BitActionButton.
Name
Type
Default value
Description
Root string? null Custom class or style applied to the root element of the BitActionButton.
Icon string? null Custom class or style applied to the icon element of the BitActionButton.
Content string? null Custom class or style applied to the content container of the BitActionButton.
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).
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.
BitIconPosition enum
Name
Value
Description
Start 0 Icon renders before the content (default).
End 1 Icon renders after the content.
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.
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