ActionButton

A native button with the icon first and the content beside it. The icon is optional, and the content is any markup, not just text. IsEnabled false dims the button and suppresses its click. IconOnly drops the content and squares the box off into an icon button, so give it an AriaLabel to keep a name for screen readers.

IconPosition moves the icon to the other side of the content. End suits forward actions like Next or Open, and the spinner takes the same side while loading.

An Href renders a real anchor instead of a button, so open-in-new-tab, the context menu, and the link announcement all keep working. Target picks where it opens; with _blank, rel="noopener" is added automatically. A disabled or loading link drops its href rather than rendering an invalid disabled attribute.

Download saves the resource instead of navigating to it: an empty value keeps the server-provided file name, any other value suggests one. Browsers honor it only for same-origin, blob:, and data: URLs.

Rel declares the relationship with the destination. It is a flags enum (BitLinkRels), so values combine with |. It is emitted for real navigations only, never for empty or hash-only hrefs.

Inside an EditForm the button defaults to submit, outside it to button; ButtonType overrides that. FormId ties a button placed outside the form to it through the native form attribute.

FullWidth stretches the button across its container and lets the content fill the room, so an end-positioned icon lands on the far edge: the familiar navigation row with the label on one side and a chevron on the other.

A label longer than the room it has been given wraps onto a second line, which keeps it readable but changes the height of the row. NoWrap keeps it on one line and ends it with an ellipsis instead. Only the drawing of the label is cut short - the button is still named by the whole of it, so a screen reader reads it out in full - but a sighted user is left with the ellipsis, so wrap the button in a BitTooltip, which shows the full label to the pointer and to the keyboard alike and is dismissed with Escape. A Title is shown to the pointer only, so it cannot be the disclosure on its own. The tooltip declares no relationship of its own here, since the button already carries the same text as its accessible name.

IsLoading swaps the icon for a spinner, marks the button busy for assistive technologies, and ignores further clicks. It is two-way bindable.

AutoLoading enters and leaves the loading state around an async OnClick, even when it throws. LoadingLabel replaces the content with a progress message and announces it to screen readers. LoadingDelay holds the spinner back for the given milliseconds so quick operations do not flash, while the click-guard still applies from the first moment.

Clicks are ignored while loading, which is what keeps a submit or a payment from firing twice. Reclickable lets them through when repeats are meaningful. Click each counter rapidly to compare.

LoadingTemplate takes over the whole loading visual. Declare the normal content through Body so both templates fit on one button.

Underlined draws a hyperlink-style underline under the text that thickens on hover, where color alone is not enough of a cue.

A standalone button keeps the control height and padding of its size, so it lines up with the other controls beside it. To put one on the line of a sentence instead, drop both: --bit-ActionButton-min-height: 0; --bit-ActionButton-padding: 0.

OnClick fires on mouse, touch, and keyboard activation, never while disabled or loading. Inside another clickable surface, such as a row or a card, set StopPropagation so the container's handler stays quiet.

Title is a native tooltip the browser shows on hover only, so it never replaces an accessible name: an icon-only button also needs an AriaLabel, kept consistent with it.

AriaDescription is a longer sentence rendered as visually hidden text the button points at through aria-describedby. It is read after the name, not as part of it, which makes it the place for what the user would want to know before acting: the size of a file, what a page will ask for.

A disabled button normally leaves the tab order, so keyboard and screen reader users can miss that the action exists. AllowDisabledFocus conveys the state through aria-disabled instead of the native attribute: the button stays focusable and discoverable, its click stays suppressed, and the focus ring is drawn in the muted disabled color. Tab through the two buttons to feel the difference.

FocusAsync moves the keyboard focus onto the button from code, for the moment a dialog opens, a step finishes, or an error sends the user back to the action that failed. AutoFocus does the same on the first render, and neither steals the focus from a button that is hidden with AriaHidden or disabled without AllowDisabledFocus.

BitParams carries a BitActionButtonParams down to every action button under it, so a toolbar, a card, or a whole page sets the shared look and the shared link behavior once instead of on every button. What it carries is a default and not an override: a button that writes a parameter for itself keeps its own value, and only what it left unset is filled in from the cascade, which is what lets one button step out of the group it is in without the group having to know about it. Every parameter of the component is on the params object, and each of them is filled in on its own, so a button can take its IconPosition from the cascade and its Underlined from its own markup.

Color paints the icon and the spinner at rest, takes over the text on hover and press, and picks the focus ring, all from the current theme. Beyond the semantic roles, the background, foreground, and border roles suit buttons that must blend into a surface, such as the ones on the dark panel below.

Using the Color parameter and its value of type BitColor enum:

Disabled: every role mutes to the same lightness with only a trace of its hue, so the inert state carries the same weight whatever the color and never reads as a dimmed accent that is still clickable.

Besides the built-in Fluent set behind IconName, Icon renders any CSS-class icon library such as FontAwesome or Bootstrap Icons: pass the raw classes, or use the BitIconInfo helpers (Css, Fa, Bi). When both are set, Icon wins. Reference the library's stylesheet in your app.

FontAwesome:

Bootstrap:

IconUrl renders an image in the icon's slot at the icon's size, for a logo or a custom asset no font provides. The spinner still takes its place while loading.

Each preset scales the text, the icon, the spinner, and the padding together. Medium is the default; Small suits dense toolbars and table rows, Large prominent standalone actions.

Using the Size parameter and its value of type BitSize enum:

Style and Class land on the root; Styles and Classes reach every part on its own: the root, the icon, the content, the loading label, and the spinner. Prefer Classes when your CSS should own states such as hover and focus, which inline styles cannot express.

Using the Styles and Classes parameters and their value of BitActionButtonClassStyles class:

The button also reads a set of CSS variables off its root for what no parameter covers. They inherit, so a value on :root or any ancestor re-skins every button below it, and one on the Style of an instance re-skins that one alone.

CSS variables:

Set once on an ancestor, inherited by every button inside it:

Dir set to Rtl mirrors the button for right-to-left languages: the icon and the content swap sides and the padding follows. Set it per button, or let it flow from an ancestor through the cascading direction value.