Accent color

ActionButton is a lightweight, icon-first flavor of button with a transparent background and colorized text and icon, ideal for inline actions like New, Edit, or Share. It renders as a native button or, when given an Href, as a link with hardened navigation attributes. It also ships with full loading support (AutoLoading with double-click protection, loading label, and delayed spinner) and accessible disabled and loading semantics out of the box.

ForceAnimation (whole page)

Usage

Basic

<BitActionButton IconName="@BitIconName.AddFriend">
    Create account
</BitActionButton>

<BitActionButton IconName="@BitIconName.AddFriend" IsEnabled="false">
    Disabled
</BitActionButton>

<BitActionButton IconName="@BitIconName.AlarmClock" AriaLabel="Call">
    AriaLabel="Call"
</BitActionButton>

<BitActionButton>
    No Icon
</BitActionButton>

<BitActionButton IconOnly IconName="@BitIconName.Phone" AriaLabel="Call" />

By default, BitActionButton renders a native button element with its icon at the start and the content next to it. Setting IsEnabled to false dims the button and suppresses its click, the AriaLabel parameter overrides the name announced by screen readers, and the icon is entirely optional. When you use IconOnly, always provide an AriaLabel (or a Title) since the button has no visible text to name it.

Icon only:

IconPosition

<BitActionButton IconPosition="BitIconPosition.Start" IconName="@BitIconName.AddFriend">
    Start (default)
</BitActionButton>

<BitActionButton IconPosition="BitIconPosition.End" IconName="@BitIconName.AddFriend">
    End
</BitActionButton>

Move the icon to the other side of the content without touching your markup order. An end-positioned icon reads naturally for forward actions like Next or Open, while the default start position suits most command-style actions. The layout also flips automatically in RTL.

Using the IconPosition parameter and BitIconPosition enum as its value:

Href

<BitActionButton IconName="@BitIconName.Globe" Href="https://bitplatform.dev" Target="_blank">
    Open bitplatform.dev in a new tab
</BitActionButton>

<BitActionButton IconName="@BitIconName.Globe" Href="https://github.com/bitfoundation/bitplatform">
    Go to bitplatform GitHub
</BitActionButton>

Providing an Href renders a real anchor element instead of a button, so browser link behaviors like open-in-new-tab, the context menu, and correct screen reader announcement all keep working. Use Target to pick where it opens; when it is _blank, a rel="noopener" is added automatically for security. Use Download to save the resource instead of navigating to it. A disabled or loading link drops its href entirely rather than rendering an invalid disabled attribute.

Open bitplatform.dev in a new tab

Go to bitplatform GitHub

Download

<BitActionButton IconName="@BitIconName.Download" Href="/images/bit-logo.svg" Download="">
    Download the logo
</BitActionButton>

<BitActionButton IconName="@BitIconName.Download" Href="/images/bit-logo.svg" Download="bit-platform-logo.svg">
    Download with a custom file name
</BitActionButton>

When the action button points to a file, the Download parameter tells the browser to save it instead of navigating to it. Pass an empty string to keep the server-provided file name, or a value to suggest your own. Browsers honor this only for same-origin, blob:, and data: URLs, so a cross-origin link will simply navigate as usual.

Download the logo

Download with a custom file name

Rel

<BitActionButton Rel="BitLinkRels.NoFollow" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe">
    Open bitplatform.dev with a rel attribute (nofollow)
</BitActionButton>

<BitActionButton Rel="BitLinkRels.NoFollow | BitLinkRels.NoReferrer" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe">
    Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
</BitActionButton>

Declare the relationship between your page and an external destination. The Rel parameter is a flags enum, so values like nofollow and noreferrer can be combined with the | operator. The rel attribute is only emitted for real navigations, meaning it is skipped for empty or hash-only hrefs, and noopener is appended automatically for _blank targets unless you already opted into a stricter value.

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)

Rich content

<BitActionButton IconName="@BitIconName.AddFriend">
        <div style="display:flex;gap:0.5rem;">
        <b>This is a custom template</b>
            <BitSpinnerLoading CustomSize="20" />
        </div>
</BitActionButton>

The body of BitActionButton is a render fragment, so it accepts any markup or component instead of plain text. You can pass it as the child content directly or through the equivalent Body parameter, which is handy when you also need to declare a LoadingTemplate on the same button.

ButtonType

@if (formIsValidSubmit is false)
{
    <EditForm Model="buttonValidationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit" novalidate>
        <DataAnnotationsValidator />

        <BitTextField Label="Required" Required @bind-Value="buttonValidationModel.RequiredText" />
        <ValidationMessage For="() => buttonValidationModel.RequiredText" style="color:red" />

        <BitTextField Label="Non-required" @bind-Value="buttonValidationModel.NonRequiredText" />
                    
        <div>
            <BitActionButton IconName="@BitIconName.SendMirrored" ButtonType="BitButtonType.Submit">
                Submit
            </BitActionButton>

            <BitActionButton IconName="@BitIconName.Reset" ButtonType="BitButtonType.Reset">
                Reset
            </BitActionButton>

            <BitActionButton IconName="@BitIconName.ButtonControl" ButtonType="BitButtonType.Button">
                Button
            </BitActionButton>
        </div>
    </EditForm>
}
else
{
    <BitMessage Color="BitColor.Success">
        The form submitted successfully.
    </BitMessage>
}
@code {
    public class ButtonValidationModel
    {
        [Required]
        public string RequiredText { get; set; } = string.Empty;
    
        public string? NonRequiredText { get; set; }
    }
    
    private bool formIsValidSubmit;
    private ButtonValidationModel buttonValidationModel = new();
    
    private async Task HandleValidSubmit()
    {
        formIsValidSubmit = true;
    
        await Task.Delay(2000);
    
        buttonValidationModel = new();
    
        formIsValidSubmit = false;
    
        StateHasChanged();
    }
    
    private void HandleInvalidSubmit()
    {
        formIsValidSubmit = false;
    }
}

Inside an EditForm, BitActionButton defaults to a submit button so it participates in validation out of the box; outside a form it defaults to a plain button that never submits anything by accident. Use the ButtonType parameter to override that default and render an explicit submit, reset, or button element.

FullWidth

<BitActionButton FullWidth IconName="@BitIconName.NavigationFlipper">
    FullWidth
</BitActionButton>

<BitActionButton FullWidth IconPosition="BitIconPosition.End" IconName="@BitIconName.Forward">
    FullWidth with end icon
</BitActionButton>

The FullWidth parameter stretches the button across all available width and aligns its content to the start, which suits stacked menus, list rows, and mobile layouts. Pairing it with an end-positioned icon produces the familiar navigation row where the label sits on one side and a chevron on the other.

Loading

<BitToggle @bind-Value="isLoading" Label="Toggle loading" />

<BitActionButton IsLoading="isLoading" IconName="@BitIconName.Save">
    Save changes
</BitActionButton>

<BitActionButton IsLoading="isLoading" IconName="@BitIconName.CloudUpload">
    Upload file
</BitActionButton>

<BitActionButton IsLoading="isLoading" IconName="@BitIconName.Send" Color="BitColor.Success">
    Send message
</BitActionButton>

<BitActionButton AutoLoading OnClick="HandleAutoLoadingClick" IconName="@BitIconName.Save">
    AutoLoading
</BitActionButton>

<BitActionButton AutoLoading OnClick="HandleAutoLoadingClick" LoadingLabel="Saving..." IconName="@BitIconName.Save">
    AutoLoading with LoadingLabel
</BitActionButton>

<BitActionButton AutoLoading OnClick="HandleAutoLoadingClick" LoadingDelay="500" IconName="@BitIconName.Save">
    AutoLoading with LoadingDelay
</BitActionButton>

<BitActionButton AutoLoading OnClick="HandleGuardedClick" IconName="@BitIconName.Shield">
    Guarded (@guardedClickCount)
</BitActionButton>

<BitActionButton AutoLoading Reclickable OnClick="HandleReclickableClick" IconName="@BitIconName.RepeatAll">
    Reclickable (@reclickableClickCount)
</BitActionButton>
@code {
    private bool isLoading;
    private int guardedClickCount;
    private int reclickableClickCount;
    
    private async Task HandleAutoLoadingClick()
    {
        await Task.Delay(2000);
    }
    
    private async Task HandleGuardedClick()
    {
        guardedClickCount++;
    
        await Task.Delay(2000);
    }
    
    private async Task HandleReclickableClick()
    {
        reclickableClickCount++;
    
        await Task.Delay(2000);
    }
}

Setting IsLoading replaces the icon with a spinner, marks the button as busy for assistive technologies, and ignores further clicks so a slow operation cannot be triggered twice. The parameter is two-way bindable, so you can drive it manually with @bind-IsLoading as shown below.

Toggle loading

You rarely need to manage that flag yourself. The AutoLoading parameter enters and leaves the loading state automatically around an async OnClick handler, including when the handler throws, and blocks double submissions while it runs (set Reclickable if you deliberately want repeat clicks). The LoadingLabel swaps the body for a progress message such as "Saving..." and announces it to screen readers, and the LoadingDelay holds the spinner back for the given milliseconds so quick operations complete without a distracting flash, while still guarding against double clicks from the very first moment.

Clicks are ignored while a button is loading, which is what protects a submit or a payment from firing twice. Set Reclickable when repeat clicks are genuinely meaningful, for example a counter or a retry that should stack up while a previous run is still in flight. Compare the two counters below by clicking each of them rapidly.

LoadingTemplate

<BitToggle @bind-Value="templateIsLoading" Label="Toggle loading" />

<BitActionButton IsLoading="templateIsLoading" IconName="@BitIconName.Download">
    <Body>
        Download
    </Body>
    <LoadingTemplate>
        <BitRingLoading CustomSize="20" Color="BitColor.Tertiary" /> Downloading...
    </LoadingTemplate>
</BitActionButton>
@code {
    private bool templateIsLoading;
}

When the default spinner does not fit your design, the LoadingTemplate parameter takes over the whole loading visual, letting you render any loader component and wording you like. Declare the normal content through the Body parameter so both templates can live on the same button, as shown below.

Toggle loading

Underlined

<BitActionButton Underlined IconName="@BitIconName.Link">
    Link style
</BitActionButton>

<BitActionButton Underlined IconName="@BitIconName.OpenInNewTab" Href="https://github.com/bitfoundation/bitplatform" Target="_blank">
    Open GitHub
</BitActionButton>

<BitActionButton Underlined Color="BitColor.Info" IconName="@BitIconName.Info">
    More info
</BitActionButton>

The Underlined parameter draws a hyperlink-style underline beneath the content that thickens on hover. It is the right choice when the button sits inside running text, where color alone is not a sufficient cue that the element is interactive, and it pairs naturally with the link rendering mode.

Open GitHub

Color

<BitActionButton Color="BitColor.Primary" IconName="@BitIconName.ColorSolid">
    Primary
</BitActionButton>
<BitActionButton Color="BitColor.Primary">
    Primary
</BitActionButton>

<BitActionButton Color="BitColor.Secondary" IconName="@BitIconName.ColorSolid">
    Secondary
</BitActionButton>
<BitActionButton Color="BitColor.Secondary">
    Secondary
</BitActionButton>

<BitActionButton Color="BitColor.Tertiary" IconName="@BitIconName.ColorSolid">
    Tertiary
</BitActionButton>
<BitActionButton Color="BitColor.Tertiary">
    Tertiary
</BitActionButton>

<BitActionButton Color="BitColor.Info" IconName="@BitIconName.ColorSolid">
    Info
</BitActionButton>
<BitActionButton Color="BitColor.Info">
    Info
</BitActionButton>

<BitActionButton Color="BitColor.Success" IconName="@BitIconName.ColorSolid">
    Success
</BitActionButton>
<BitActionButton Color="BitColor.Success">
    Success
</BitActionButton>

<BitActionButton Color="BitColor.Warning" IconName="@BitIconName.ColorSolid">
    Warning
</BitActionButton>
<BitActionButton Color="BitColor.Warning">
    Warning
</BitActionButton>

<BitActionButton Color="BitColor.SevereWarning" IconName="@BitIconName.ColorSolid">
    SevereWarning
</BitActionButton>
<BitActionButton Color="BitColor.SevereWarning">
    SevereWarning
</BitActionButton>

<BitActionButton Color="BitColor.Error" IconName="@BitIconName.ColorSolid">
    Error
</BitActionButton>
<BitActionButton Color="BitColor.Error">
    Error
</BitActionButton>

<BitActionButton Color="BitColor.PrimaryBackground" IconName="@BitIconName.ColorSolid">
    PrimaryBackground
</BitActionButton>
<BitActionButton Color="BitColor.PrimaryBackground">
    PrimaryBackground
</BitActionButton>

<BitActionButton Color="BitColor.SecondaryBackground" IconName="@BitIconName.ColorSolid">
    SecondaryBackground
</BitActionButton>
<BitActionButton Color="BitColor.SecondaryBackground">
    SecondaryBackground
</BitActionButton>

<BitActionButton Color="BitColor.TertiaryBackground" IconName="@BitIconName.ColorSolid">
    TertiaryBackground
</BitActionButton>
<BitActionButton Color="BitColor.TertiaryBackground">
    TertiaryBackground
</BitActionButton>

<BitActionButton Color="BitColor.PrimaryForeground" IconName="@BitIconName.ColorSolid">
    PrimaryForeground
</BitActionButton>
<BitActionButton Color="BitColor.PrimaryForeground">
    PrimaryForeground
</BitActionButton>

<BitActionButton Color="BitColor.SecondaryForeground" IconName="@BitIconName.ColorSolid">
    SecondaryForeground
</BitActionButton>
<BitActionButton Color="BitColor.SecondaryForeground">
    SecondaryForeground
</BitActionButton>

<BitActionButton Color="BitColor.TertiaryForeground" IconName="@BitIconName.ColorSolid">
    TertiaryForeground
</BitActionButton>
<BitActionButton Color="BitColor.TertiaryForeground">
    TertiaryForeground
</BitActionButton>

<BitActionButton Color="BitColor.PrimaryBorder" IconName="@BitIconName.ColorSolid">
    PrimaryBorder
</BitActionButton>
<BitActionButton Color="BitColor.PrimaryBorder">
    PrimaryBorder
</BitActionButton>

<BitActionButton Color="BitColor.SecondaryBorder" IconName="@BitIconName.ColorSolid">
    SecondaryBorder
</BitActionButton>
<BitActionButton Color="BitColor.SecondaryBorder">
    SecondaryBorder
</BitActionButton>

<BitActionButton Color="BitColor.TertiaryBorder" IconName="@BitIconName.ColorSolid">
    TertiaryBorder
</BitActionButton>
<BitActionButton Color="BitColor.TertiaryBorder">
    TertiaryBorder
</BitActionButton>


<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.Primary">Primary</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.Secondary">Secondary</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.Tertiary">Tertiary</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.Info">Info</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.Success">Success</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.Warning">Warning</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.SevereWarning">SevereWarning</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.Error">Error</BitActionButton>

<div style="background:var(--bit-clr-fg-ter);padding:1rem">
    <BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.PrimaryBackground">PrimaryBackground</BitActionButton>
    <BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.SecondaryBackground">SecondaryBackground</BitActionButton>
    <BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.TertiaryBackground">TertiaryBackground</BitActionButton>
</div>

<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.PrimaryForeground">PrimaryForeground</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.SecondaryForeground">SecondaryForeground</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.TertiaryForeground">TertiaryForeground</BitActionButton>

<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.PrimaryBorder">PrimaryBorder</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.SecondaryBorder">SecondaryBorder</BitActionButton>
<BitActionButton IsEnabled="false" IconName="@BitIconName.AddFriend" Color="BitColor.TertiaryBorder">TertiaryBorder</BitActionButton>

The Color parameter tints both the icon and the text, along with their hover and active shades, straight from the current theme. Beyond the semantic set (primary through error), the background, foreground, and border colors are available for buttons that must blend into a surface, such as the ones placed on the dark panel below.

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

Disabled: each color keeps its own disabled shade, but every one of them is muted to the same lightness with only a trace of the original hue left, so the inert state carries the same weight whatever the Color is and never reads as a merely dimmed accent that is still clickable.

External Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<BitActionButton Icon="@("fa-solid fa-house")">
    House (Icon=@@("fa-solid fa-house"))
</BitActionButton>
        
<BitActionButton Icon="@BitIconInfo.Css("fa-solid fa-heart")" Color="BitColor.Secondary">
    Heart (Icon="@@BitIconInfo.Css("fa-solid fa-heart")")
</BitActionButton>
        
<BitActionButton Icon="@BitIconInfo.Fa("fa-brands fa-github")" Color="BitColor.Tertiary">
    GitHub (Icon="@@BitIconInfo.Fa("fa-brands fa-github")")
</BitActionButton>
        
<BitActionButton Icon="@BitIconInfo.Fa("solid rocket")" Color="BitColor.Error">
    Rocket (Icon="@@BitIconInfo.Fa("solid rocket")")
</BitActionButton>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<BitActionButton Icon="@("bi bi-house-fill")">
    House (Icon=@@("bi bi-house-fill"))
</BitActionButton>
        
<BitActionButton Icon="@BitIconInfo.Css("bi bi-heart-fill")" Color="BitColor.Secondary">
    Heart (Icon="@@BitIconInfo.Css("bi bi-heart-fill")")
</BitActionButton>
        
<BitActionButton Icon="@BitIconInfo.Bi("github")" Color="BitColor.Tertiary">
    GitHub (Icon="@@BitIconInfo.Bi("github")")
</BitActionButton>
        
<BitActionButton Icon="@BitIconInfo.Bi("gear-fill")" Color="BitColor.Error">
    Gear (Icon="@@BitIconInfo.Bi("gear-fill")")
</BitActionButton>

Besides the built-in Fluent icon set exposed through IconName, the Icon parameter renders icons from any CSS-class based library such as FontAwesome or Bootstrap Icons. Pass the raw classes directly, or use the BitIconInfo helpers (Css, Fa, and Bi) for a shorter syntax. When both parameters are set, Icon wins. Remember to reference the icon library's stylesheet in your app.

FontAwesome:

Bootstrap:

Size

<BitActionButton Size="BitSize.Small" IconName="@BitIconName.FontSize">
    Small
</BitActionButton>

<BitActionButton Size="BitSize.Medium" IconName="@BitIconName.FontSize">
    Medium
</BitActionButton>

<BitActionButton Size="BitSize.Large" IconName="@BitIconName.FontSize">
    Large
</BitActionButton>

Each preset scales the font size, the icon, the spinner, and the padding together, so the button stays visually balanced at any size. Medium is the default; Small suits dense toolbars and table rows, while Large works for prominent standalone actions.

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

Events

<BitActionButton OnClick="() => clickCounter++" IconName="@BitIconName.TouchPointer">
    Click me (@clickCounter)
</BitActionButton>


<div class="clickable-row" @onclick="() => rowClickCount++">
    <span>Row clicks: @rowClickCount | Button clicks: @innerClickCount</span>

    <BitActionButton OnClick="() => innerClickCount++" IconName="@BitIconName.Edit">
        Bubbles up
    </BitActionButton>

    <BitActionButton StopPropagation OnClick="() => innerClickCount++" IconName="@BitIconName.Edit">
        StopPropagation
    </BitActionButton>
</div>
@code {
    private int clickCounter;
    private int rowClickCount;
    private int innerClickCount;
}

The OnClick callback fires on activation by mouse, touch, or keyboard, and it is never invoked while the button is disabled or loading. When the button lives inside another clickable surface such as a table row or a card, set StopPropagation so activating it does not also trigger the container's handler.

Clicking anywhere on the row below counts as a row click, except on the second button which stops the event from bubbling up:

Row clicks: 0 | Button clicks: 0

Title

<BitActionButton Title="Save your changes" IconName="@BitIconName.Save">
    Hover me
</BitActionButton>

<BitActionButton IconOnly Title="Delete" AriaLabel="Delete" Color="BitColor.Error" IconName="@BitIconName.Delete" />

The Title parameter renders a native tooltip that appears on hover. It is a useful supplement for icon-only buttons, but it is not a replacement for an accessible name, since tooltips are not reachable by keyboard or reliably announced by screen readers. Provide an AriaLabel as well, keeping both texts consistent.

AllowDisabledFocus

<BitActionButton IsEnabled="false" IconName="@BitIconName.Blocked">
    Disabled (skipped by Tab)
</BitActionButton>

<BitActionButton IsEnabled="false" AllowDisabledFocus IconName="@BitIconName.Blocked">
    Disabled (still focusable)
</BitActionButton>

A disabled button is normally removed from the tab order, which means keyboard and screen reader users can miss that the action exists at all. Setting AllowDisabledFocus conveys the disabled state through aria-disabled instead of the native disabled attribute, so the button stays focusable and discoverable while its click remains suppressed. The focus ring is drawn in the muted disabled color rather than the color of the button, so the focus stays visible without suggesting the action is available. Tab through the two buttons below to feel the difference.

Style & Class

<style>
    .custom-icon {
        color: hotpink;
    }

    .custom-content {
        position: relative;
    }

    .custom-content::after {
        content: '';
        left: 0;
        width: 0;
        height: 2px;
        bottom: -6px;
        position: absolute;
        transition: 0.3s ease;
        background: linear-gradient(90deg, #ff00cc, #3333ff);
    }

    .custom-root:hover .custom-content {
        color: blueviolet;
    }

    .custom-root:hover .custom-content::after {
        width: 100%;
    }
</style>


<BitActionButton IconName="@BitIconName.Brush"
                 Styles="@(new() { Root = "font-size: 1.5rem;",
                                   Icon = "color: blueviolet;",
                                   Content = "text-shadow: aqua 0 0 1rem;" })">
    Action Button Styles
</BitActionButton>

<BitActionButton IconName="@BitIconName.FormatPainter"
                 Classes="@(new() { Root = "custom-root",
                                    Icon = "custom-icon",
                                    Content = "custom-content" })">
    Action Button Classes (Hover me)
</BitActionButton>

Every visual part of the button is addressable: the root element, the icon, the content container, the loading label, and the spinner. Use Styles for one-off inline tweaks and Classes when you want your own CSS to own the styling, including states such as hover and focus that inline styles cannot express.

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

RTL

<BitActionButton Dir="BitDir.Rtl" IconName="@BitIconName.AddFriend">
    ساخت حساب
</BitActionButton>

Setting Dir to Rtl mirrors the button for right-to-left languages, so the icon and the content swap sides and the padding follows suit. You can set it per button as shown here, or let it flow from an ancestor through the cascading direction value.

API

BitActionButton parameters

Name	Type	Default value	Description
AllowDisabledFocus	bool	false	Keeps the disabled action button focusable and discoverable by assistive technologies, conveying the disabled state using aria-disabled instead of the native disabled attribute.
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.
Body	RenderFragment?	null	Alias for ChildContent, the custom body of the action button (text and/or any render fragment).
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.
Download	string?	null	The value of the download attribute of the link rendered by the button when the Href parameter is provided. Instructs the browser to download the linked resource instead of navigating to it, using the provided value (if any) as the suggested file name.
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	Gets or sets a value indicating whether the component should expand to occupy the full 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	Gets or sets a value indicating whether only the icon is displayed, without accompanying text.
IconPosition	BitIconPosition?	null	Gets or sets the position of the icon relative to the component's content.
IsLoading	bool	false	Determines whether the action button is in loading mode or not (two-way bindable).
LoadingDelay	int	0	The delay in milliseconds before the loading indicator appears after entering the loading state, useful to avoid a spinner flash for fast operations. The click-guard of the loading state applies immediately regardless of this delay.
LoadingLabel	string?	null	The text to show next to the spinner while the action button is in the loading state, replacing the button body. It is also announced by screen readers through a status live region when the loading state starts.
LoadingTemplate	RenderFragment?	null	The custom template used to replace the default loading indicator inside the action button in the loading state.
OnClick	EventCallback<MouseEventArgs>		Gets or sets the callback that is invoked when the component is clicked.
Reclickable	bool	false	Enables re-clicking the action button while it is in the loading state. By default, clicks are ignored while the button is loading to protect against double submissions.
Rel	BitLinkRels?	null	Gets or sets the relationship type between the current element and the linked resource, as defined by the link's rel attribute.
Size	BitSize?	null	Sets the preset size (Small, Medium, Large) for typography and padding of the action button.
StopPropagation	bool	false	If true, stops the propagation of the click event to the parent elements. Useful when the action button is placed inside clickable containers like rows or cards.
Styles	BitActionButtonClassStyles?	null	Gets or sets the custom CSS inline styles to apply to the action button component.
Target	string?	null	Gets or sets the name of the target frame or window for the navigation action when the action button renders as an anchor (by providing the Href parameter). When set to _blank and no opener-related Rel is provided, noopener is added to the rel attribute automatically.
Title	string?	null	The tooltip to show when the mouse is placed on the button.
Underlined	bool	false	Adds an underline to the action button text, useful for link-style buttons.

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.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
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.

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.
LoadingLabel	string?	null	Custom class or style applied to the loading label element of the BitActionButton.
Spinner	string?	null	Custom class or style applied to the loading spinner element of the BitActionButton.

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.

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.

BitLinkRels 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.