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

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

Primary & Secondary

<BitButton>Primary text</BitButton>
<BitButton SecondaryText="secondary text" />

<BitButton SecondaryText="this is the secondary text">Primary text</BitButton>
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 Variant="BitVariant.Fill">Fill</BitButton>
<BitButton Variant="BitVariant.Outline">Outline</BitButton>
<BitButton Variant="BitVariant.Text">Text</BitButton>

<BitButton Variant="BitVariant.Fill" SecondaryText="this is the secondary text">Fill</BitButton>
<BitButton Variant="BitVariant.Outline" SecondaryText="this is the secondary text">Outline</BitButton>
<BitButton Variant="BitVariant.Text" SecondaryText="this is the secondary text">Text</BitButton>


<BitButton Variant="BitVariant.Fill" IsEnabled="false">Fill</BitButton>
<BitButton Variant="BitVariant.Outline" IsEnabled="false">Outline</BitButton>
<BitButton Variant="BitVariant.Text" IsEnabled="false">Text</BitButton>

<BitButton Variant="BitVariant.Fill" SecondaryText="this is the secondary text" IsEnabled="false">Fill</BitButton>
<BitButton Variant="BitVariant.Outline" SecondaryText="this is the secondary text" IsEnabled="false">Outline</BitButton>
<BitButton Variant="BitVariant.Text" SecondaryText="this is the secondary text" IsEnabled="false">Text</BitButton>
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:


Disabled

<BitButton IsEnabled="false">Focusable disabled</BitButton>
<BitButton IsEnabled="false" AllowDisabledFocus="false">Unfocusable disabled</BitButton>
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

<BitButton Title="This is a tooltip" Variant="BitVariant.Fill">Hover me</BitButton>
<BitButton Title="Another tooltip" Variant="BitVariant.Outline">Hover me</BitButton>
<BitButton Title="Text tooltip" Variant="BitVariant.Text">Hover me</BitButton>
The Title parameter sets the native tooltip that appears when the pointer hovers over the button.

Icon

<BitButton IconName="@BitIconName.EmojiNeutral" Variant="BitVariant.Fill" />
<BitButton IconName="@BitIconName.EmojiNeutral" Variant="BitVariant.Outline" />
<BitButton IconName="@BitIconName.EmojiNeutral" Variant="BitVariant.Text" />

<BitButton IconName="@BitIconName.Emoji" Variant="BitVariant.Fill">Start</BitButton>
<BitButton IconName="@BitIconName.Emoji" Variant="BitVariant.Outline">Start</BitButton>
<BitButton IconName="@BitIconName.Emoji" Variant="BitVariant.Text">Start</BitButton>

<BitButton IconName="@BitIconName.Emoji" SecondaryText="this is the secondary text" Variant="BitVariant.Fill">Start</BitButton>
<BitButton IconName="@BitIconName.Emoji" SecondaryText="this is the secondary text" Variant="BitVariant.Outline">Start</BitButton>
<BitButton IconName="@BitIconName.Emoji" SecondaryText="this is the secondary text" Variant="BitVariant.Text">Start</BitButton>

<BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" IconPosition="BitIconPosition.End">End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" IconPosition="BitIconPosition.End">End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" IconPosition="BitIconPosition.End">End</BitButton>

<BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Fill" IconPosition="BitIconPosition.End">End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Outline" IconPosition="BitIconPosition.End">End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Text" IconPosition="BitIconPosition.End">End</BitButton>

<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Fill">Start</BitButton>
<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Outline">Start</BitButton>
<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Text">Start</BitButton>

<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Fill" IconPosition="BitIconPosition.End">End</BitButton>
<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Outline" IconPosition="BitIconPosition.End">End</BitButton>
<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Text" IconPosition="BitIconPosition.End">End</BitButton>
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

<BitButton IconOnly AriaLabel="Add" IconName="@BitIconName.Add" Variant="BitVariant.Fill" />
<BitButton IconOnly AriaLabel="Edit" IconName="@BitIconName.Edit" Variant="BitVariant.Outline" />
<BitButton IconOnly AriaLabel="Delete" IconName="@BitIconName.Delete" Variant="BitVariant.Text" />
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

<BitButton IsLoading="fillIsLoading" Variant="BitVariant.Fill" Style="min-width: 11rem" OnClick="LoadingFillClick">
    Click me
</BitButton>

<BitButton IsLoading="outlineIsLoading" Variant="BitVariant.Outline" Style="min-width: 11rem" OnClick="LoadingOutlineClick">
    Click me
</BitButton>

<BitButton IsLoading="textIsLoading" Variant="BitVariant.Text" Style="min-width: 11rem" OnClick="LoadingTextClick">
    Click me
</BitButton>


<BitButton IsLoading="fillIsLoading" SecondaryText="this is the secondary text" Variant="BitVariant.Fill" Style="min-width: 11rem" OnClick="LoadingFillClick">
    Click me
</BitButton>

<BitButton IsLoading="outlineIsLoading" SecondaryText="this is the secondary text" Variant="BitVariant.Outline" Style="min-width: 11rem" OnClick="LoadingOutlineClick">
    Click me
</BitButton>

<BitButton IsLoading="textIsLoading" SecondaryText="this is the secondary text" Variant="BitVariant.Text" Style="min-width: 11rem" OnClick="LoadingTextClick">
    Click me
</BitButton>


<BitButton OnClick="AutoLoadingClick" AutoLoading>Click me</BitButton>
<div>AutoLoading click count: @autoLoadCount</div>

<BitButton OnClick="AutoLoadingReclick" AutoLoading Reclickable>Reclickable</BitButton>
<div>Re-clickable AutoLoading click count: @reclickableAutoLoadCount</div>
@code {
    private bool fillIsLoading;
    private bool outlineIsLoading;
    private bool textIsLoading;
    
    private async Task LoadingFillClick()
    {
        fillIsLoading = true;
        await Task.Delay(3000);
        fillIsLoading = false;
    }
    
    private async Task LoadingOutlineClick()
    {
        outlineIsLoading = true;
        await Task.Delay(3000);
        outlineIsLoading = false;
    }
    
    private async Task LoadingTextClick()
    {
        textIsLoading = true;
        await Task.Delay(3000);
        textIsLoading = false;
    }
    
    private int autoLoadCount;
    private async Task AutoLoadingClick()
    {
        autoLoadCount++;
        await Task.Delay(3000);
    }
    
    private int reclickableAutoLoadCount;
    private TaskCompletionSource clickTsc = new();
    private CancellationTokenSource delayCts = new();
    private Task AutoLoadingReclick(bool isLoading)
    {
        if (isLoading)
        {
            clickTsc.TrySetException(new TaskCanceledException());
            delayCts.Cancel();
        }
    
        delayCts = new();
        clickTsc = new();
    
        reclickableAutoLoadCount++;
    
        _ = Task.Delay(3000, delayCts.Token).ContinueWith(async delayTask =>
        {
            await delayTask;
            clickTsc.TrySetResult();
        });
    
        return clickTsc.Task;
    }
}
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

<BitButton IsLoading="true"
           LoadingLabel="End..."
           Style="min-width: 6.5rem;"
           Variant="BitVariant.Outline"
           LoadingLabelPosition="BitLabelPosition.End">
    End
</BitButton>

<BitButton IsLoading="true"
           LoadingLabel="Start..."
           Style="min-width: 6.5rem;"
           Variant="BitVariant.Outline"
           LoadingLabelPosition="BitLabelPosition.Start">
    Start
</BitButton>

<BitButton IsLoading="true"
           LoadingLabel="Bottom..."
           Style="min-width: 6.5rem;"
           Variant="BitVariant.Outline"
           LoadingLabelPosition="BitLabelPosition.Bottom">
    Bottom
</BitButton>

<BitButton IsLoading="true"
           LoadingLabel="Top..."
           Style="min-width: 6.5rem;"
           Variant="BitVariant.Outline"
           LoadingLabelPosition="BitLabelPosition.Top">
    Top
</BitButton>
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

<BitButton Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
    Open bitplatform.dev
</BitButton>

<BitButton Href="https://github.com/bitfoundation/bitplatform" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
    Go to bitplatform GitHub
</BitButton>


<BitButton Download="bit-logo.svg"
           Href="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg"
           IconName="@BitIconName.Download"
           Variant="BitVariant.Outline">
    Download the bit logo
</BitButton>
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

<BitButton Rel="BitLinkRels.NoFollow" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
    Open bitplatform.dev with a rel attribute (nofollow)
</BitButton>

<BitButton Rel="BitLinkRels.NoFollow | BitLinkRels.NoReferrer" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
    Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
</BitButton>
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

<BitDropdown Label="FloatPosition" Items="floatPositionList" @bind-Value="floatPosition" FitWidth />
<BitTextField Label="FloatOffset" @bind-Value="floatOffset" Immediate />

<BitButton IconOnly 
           Size="BitSize.Large" 
           IconName="@BitIconName.Add" 
           OnClick="ScrollToFloat" 
           Float Draggable
           FloatPosition="floatPosition" 
           FloatOffset="@floatOffset" />


<div style="position: relative; border: 1px gray solid">
    <BitButton IconOnly 
               IconName="@BitIconName.Edit" 
               Draggable
               FloatAbsolute
               FloatPosition="floatPosition" 
               FloatOffset="@floatOffset" />
    <div style="height:300px;overflow:auto;padding:0.5rem">
        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.
        <br />
        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.
        <br />
        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.
        <br />
        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.
    </div>
</div>
@code {
    private string? floatOffset = "63px";
    private BitPosition floatPosition = BitPosition.BottomRight;
    
    [Inject] private IJSRuntime _js { get; set; } = default!;
    private async Task ScrollToFloat() => await _js.ScrollToElement("example12");
    
    private readonly List<BitDropdownItem<BitPosition>> floatPositionList = Enum.GetValues<BitPosition>()
                                                                                .Cast<BitPosition>()
                                                                                .Select(enumValue => new BitDropdownItem<BitPosition>
                                                                                {
                                                                                    Value = enumValue,
                                                                                    Text = enumValue.ToString()
                                                                                })
                                                                                .ToList();
}
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

@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>
            <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
            <BitButton ButtonType="BitButtonType.Reset">Reset</BitButton>
            <BitButton ButtonType="BitButtonType.Button">Button</BitButton>
        </div>
    </EditForm>
}
else
{
    <BitMessage Color="BitColor.Success">
        The form submitted successfully.
    </BitMessage>
}


@if (externalFormSubmitted is false)
{
    <EditForm id="demo-external-form" Model="externalFormModel" OnValidSubmit="HandleExternalFormValidSubmit" novalidate>
        <DataAnnotationsValidator />

        <BitTextField Label="Required" Required @bind-Value="externalFormModel.RequiredText" />
        <ValidationMessage For="() => externalFormModel.RequiredText" style="color:red" />
    </EditForm>

    <BitButton FormId="demo-external-form" ButtonType="BitButtonType.Submit">
        External submit
    </BitButton>
}
else
{
    <BitMessage Color="BitColor.Success">
        The external 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;
    }
    
    private bool externalFormSubmitted;
    private ButtonValidationModel externalFormModel = new();
    
    private async Task HandleExternalFormValidSubmit()
    {
        externalFormSubmitted = true;
    
        await Task.Delay(2000);
    
        externalFormModel = new();
    
        externalFormSubmitted = false;
    
        StateHasChanged();
    }
}
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

<style>
    .custom-content {
        gap: 0.5rem;
        display: flex;
        align-items: center;
    }
</style>


<BitButton Class="custom-content">
    <BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />
    <span>A primary template</span>
    <BitRippleLoading CustomSize="20" Color="BitColor.Tertiary" />
</BitButton>

<BitButton Class="custom-content" Variant="BitVariant.Outline">
    <PrimaryTemplate>Primary text</PrimaryTemplate>
    <SecondaryTemplate>
        <BitIcon IconName="@BitIconName.Accept" />
        <span>A secondary template</span>
        <BitRollerLoading CustomSize="20" />
    </SecondaryTemplate>
</BitButton>

<BitButton Class="custom-content" Variant="BitVariant.Text">
    <PrimaryTemplate>
        <BitIcon IconName="@BitIconName.Airplane" />
        <span>A primary template</span>
        <BitRippleLoading CustomSize="20" />
    </PrimaryTemplate>
    <SecondaryTemplate>
        <BitIcon IconName="@BitIconName.Accept" />
        <span>A secondary template</span>
        <BitRollerLoading CustomSize="20" />
    </SecondaryTemplate>
</BitButton>

<BitButton IsLoading="templateIsLoading" OnClick="LoadingTemplateClick">
    <PrimaryTemplate>Click me</PrimaryTemplate>
    <LoadingTemplate>
        <div style="display:flex;align-items:center;">
            <BitEllipsisLoading CustomSize="32" Color="BitColor.Tertiary" />
            <span>Wait...</span>
        </div>
    </LoadingTemplate>
</BitButton>
@code {
    private bool templateIsLoading;
    
    private async Task LoadingTemplateClick()
    {
        templateIsLoading = true;
        await Task.Delay(3000);
        templateIsLoading = false;
    }
}
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

<BitButton OnClick="() => clickCounter++">Click me (@clickCounter)</BitButton>


<div @onclick="() => parentClickCounter++">
    <BitButton StopPropagation OnClick="() => buttonClickCounter++">With StopPropagation</BitButton>
    <BitButton OnClick="() => buttonClickCounter++">Without StopPropagation</BitButton>
    <div>Button clicks: @buttonClickCounter, Parent clicks: @parentClickCounter</div>
</div>


<BitButton @ref="focusButtonRef" Variant="BitVariant.Outline">Focus target</BitButton>
<BitButton OnClick="@(async () => await focusButtonRef.FocusAsync())">Focus the other button</BitButton>
@code {
    private int clickCounter;
    
    private int parentClickCounter;
    private int buttonClickCounter;
    
    private BitButton focusButtonRef = default!;
}
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

<BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />
<BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />

<BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
<BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />

<BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
<BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />


<BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
<BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>

<BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
<BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>

<BitButton Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
<BitButton IsLoading Size="BitSize.Small" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>


<BitButton Size="BitSize.Small" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
<BitButton Size="BitSize.Small" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
<BitButton Size="BitSize.Small" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>



<BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />
<BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />

<BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
<BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />

<BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
<BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />


<BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
<BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>

<BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
<BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>

<BitButton Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
<BitButton IsLoading Size="BitSize.Medium" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>


<BitButton Size="BitSize.Medium" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
<BitButton Size="BitSize.Medium" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
<BitButton Size="BitSize.Medium" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>



<BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />
<BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill" />

<BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
<BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" />
            
<BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />
<BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" />


<BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
<BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>

<BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
<BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
            
<BitButton Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
<BitButton IsLoading Size="BitSize.Large" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>


<BitButton Size="BitSize.Large" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Fill</BitButton>
<BitButton Size="BitSize.Large" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline">Outline</BitButton>
<BitButton Size="BitSize.Large" SecondaryText="this is the secondary text" IconName="@BitIconName.Emoji2" Variant="BitVariant.Text">Text</BitButton>
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

<BitButton FullWidth IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Full Width Button</BitButton>
The FullWidth parameter expands the button to occupy 100% of its container's width, which is handy for forms and mobile layouts.

FixedColor

<BitButton FixedColor IconOnly
           Size="BitSize.Large"
           Variant="BitVariant.Outline"
           IconName="@BitIconName.Emoji2"
           Color="BitColor.TertiaryBackground" />

<BitButton FixedColor IconOnly
           Size="BitSize.Large"
           Variant="BitVariant.Text"
           IconName="@BitIconName.Emoji2"
           Color="BitColor.TertiaryBackground" />
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

<BitButton Color="BitColor.Primary">Primary</BitButton>
<BitButton Color="BitColor.Primary" Variant="BitVariant.Outline">Primary</BitButton>
<BitButton Color="BitColor.Primary" Variant="BitVariant.Text">Primary</BitButton>

<BitButton Color="BitColor.Secondary">Secondary</BitButton>
<BitButton Color="BitColor.Secondary" Variant="BitVariant.Outline">Secondary</BitButton>
<BitButton Color="BitColor.Secondary" Variant="BitVariant.Text">Secondary</BitButton>

<BitButton Color="BitColor.Tertiary">Tertiary</BitButton>
<BitButton Color="BitColor.Tertiary" Variant="BitVariant.Outline">Tertiary</BitButton>
<BitButton Color="BitColor.Tertiary" Variant="BitVariant.Text">Tertiary</BitButton>

<BitButton Color="BitColor.Info">Info</BitButton>
<BitButton Color="BitColor.Info" Variant="BitVariant.Outline">Info</BitButton>
<BitButton Color="BitColor.Info" Variant="BitVariant.Text">Info</BitButton>

<BitButton Color="BitColor.Success">Success</BitButton>
<BitButton Color="BitColor.Success" Variant="BitVariant.Outline">Success</BitButton>
<BitButton Color="BitColor.Success" Variant="BitVariant.Text">Success</BitButton>

<BitButton Color="BitColor.Warning">Warning</BitButton>
<BitButton Color="BitColor.Warning" Variant="BitVariant.Outline">Warning</BitButton>
<BitButton Color="BitColor.Warning" Variant="BitVariant.Text">Warning</BitButton>

<BitButton Color="BitColor.SevereWarning">SevereWarning</BitButton>
<BitButton Color="BitColor.SevereWarning" Variant="BitVariant.Outline">SevereWarning</BitButton>
<BitButton Color="BitColor.SevereWarning" Variant="BitVariant.Text">SevereWarning</BitButton>

<BitButton Color="BitColor.Error">Error</BitButton>
<BitButton Color="BitColor.Error" Variant="BitVariant.Outline">Error</BitButton>
<BitButton Color="BitColor.Error" Variant="BitVariant.Text">Error</BitButton>


<div style="background:var(--bit-clr-fg-sec);padding:1rem">
    <BitButton Color="BitColor.PrimaryBackground">PrimaryBackground</BitButton>
    <BitButton Color="BitColor.PrimaryBackground" Variant="BitVariant.Outline">PrimaryBackground</BitButton>
    <BitButton Color="BitColor.PrimaryBackground" Variant="BitVariant.Text">PrimaryBackground</BitButton>

    <BitButton Color="BitColor.SecondaryBackground">SecondaryBackground</BitButton>
    <BitButton Color="BitColor.SecondaryBackground" Variant="BitVariant.Outline">SecondaryBackground</BitButton>
    <BitButton Color="BitColor.SecondaryBackground" Variant="BitVariant.Text">SecondaryBackground</BitButton>

    <BitButton Color="BitColor.TertiaryBackground">TertiaryBackground</BitButton>
    <BitButton Color="BitColor.TertiaryBackground" Variant="BitVariant.Outline">TertiaryBackground</BitButton>
    <BitButton Color="BitColor.TertiaryBackground" Variant="BitVariant.Text">TertiaryBackground</BitButton>
</div>


<BitButton Color="BitColor.PrimaryForeground">PrimaryForeground</BitButton>
<BitButton Color="BitColor.PrimaryForeground" Variant="BitVariant.Outline">PrimaryForeground</BitButton>
<BitButton Color="BitColor.PrimaryForeground" Variant="BitVariant.Text">PrimaryForeground</BitButton>

<BitButton Color="BitColor.SecondaryForeground">SecondaryForeground</BitButton>
<BitButton Color="BitColor.SecondaryForeground" Variant="BitVariant.Outline">SecondaryForeground</BitButton>
<BitButton Color="BitColor.SecondaryForeground" Variant="BitVariant.Text">SecondaryForeground</BitButton>

<BitButton Color="BitColor.TertiaryForeground">TertiaryForeground</BitButton>
<BitButton Color="BitColor.TertiaryForeground" Variant="BitVariant.Outline">TertiaryForeground</BitButton>
<BitButton Color="BitColor.TertiaryForeground" Variant="BitVariant.Text">TertiaryForeground</BitButton>


<BitButton Color="BitColor.PrimaryBorder">PrimaryBorder</BitButton>
<BitButton Color="BitColor.PrimaryBorder" Variant="BitVariant.Outline">PrimaryBorder</BitButton>
<BitButton Color="BitColor.PrimaryBorder" Variant="BitVariant.Text">PrimaryBorder</BitButton>

<BitButton Color="BitColor.SecondaryBorder">SecondaryBorder</BitButton>
<BitButton Color="BitColor.SecondaryBorder" Variant="BitVariant.Outline">SecondaryBorder</BitButton>
<BitButton Color="BitColor.SecondaryBorder" Variant="BitVariant.Text">SecondaryBorder</BitButton>

<BitButton Color="BitColor.TertiaryBorder">TertiaryBorder</BitButton>
<BitButton Color="BitColor.TertiaryBorder" Variant="BitVariant.Outline">TertiaryBorder</BitButton>
<BitButton Color="BitColor.TertiaryBorder" Variant="BitVariant.Text">TertiaryBorder</BitButton>


<div><b>Disabled</b>:</div>

<BitButton IsEnabled="false" Variant="BitVariant.Fill">Primary</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline">Primary</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text">Primary</BitButton>

<BitButton IsEnabled="false" Variant="BitVariant.Fill" Color="BitColor.Secondary">Secondary</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline" Color="BitColor.Secondary">Secondary</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text" Color="BitColor.Secondary">Secondary</BitButton>

<BitButton IsEnabled="false" Variant="BitVariant.Fill" Color="BitColor.Tertiary">Tertiary</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline" Color="BitColor.Tertiary">Tertiary</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text" Color="BitColor.Tertiary">Tertiary</BitButton>

<BitButton IsEnabled="false" Variant="BitVariant.Fill" Color="BitColor.Info">Info</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline" Color="BitColor.Info">Info</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text" Color="BitColor.Info">Info</BitButton>

<BitButton IsEnabled="false" Variant="BitVariant.Fill" Color="BitColor.Success">Success</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline" Color="BitColor.Success">Success</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text" Color="BitColor.Success">Success</BitButton>

<BitButton IsEnabled="false" Variant="BitVariant.Fill" Color="BitColor.Warning">Warning</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline" Color="BitColor.Warning">Warning</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text" Color="BitColor.Warning">Warning</BitButton>

<BitButton IsEnabled="false" Variant="BitVariant.Fill" Color="BitColor.SevereWarning">SevereWarning</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline" Color="BitColor.SevereWarning">SevereWarning</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text" Color="BitColor.SevereWarning">SevereWarning</BitButton>

<BitButton IsEnabled="false" Variant="BitVariant.Fill" Color="BitColor.Error">Error</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Outline" Color="BitColor.Error">Error</BitButton>
<BitButton IsEnabled="false" Variant="BitVariant.Text" Color="BitColor.Error">Error</BitButton>

<div style="background:var(--bit-clr-fg-sec);padding:1rem">
    <BitButton IsEnabled="false" Color="BitColor.PrimaryBackground">PrimaryBackground</BitButton>
    <BitButton IsEnabled="false" Color="BitColor.PrimaryBackground" Variant="BitVariant.Outline">PrimaryBackground</BitButton>
    <BitButton IsEnabled="false" Color="BitColor.PrimaryBackground" Variant="BitVariant.Text">PrimaryBackground</BitButton>

    <BitButton IsEnabled="false" Color="BitColor.SecondaryBackground">SecondaryBackground</BitButton>
    <BitButton IsEnabled="false" Color="BitColor.SecondaryBackground" Variant="BitVariant.Outline">SecondaryBackground</BitButton>
    <BitButton IsEnabled="false" Color="BitColor.SecondaryBackground" Variant="BitVariant.Text">SecondaryBackground</BitButton>

    <BitButton IsEnabled="false" Color="BitColor.TertiaryBackground">TertiaryBackground</BitButton>
    <BitButton IsEnabled="false" Color="BitColor.TertiaryBackground" Variant="BitVariant.Outline">TertiaryBackground</BitButton>
    <BitButton IsEnabled="false" Color="BitColor.TertiaryBackground" Variant="BitVariant.Text">TertiaryBackground</BitButton>
</div>

<BitButton IsEnabled="false" Color="BitColor.PrimaryForeground">PrimaryForeground</BitButton>
<BitButton IsEnabled="false" Color="BitColor.PrimaryForeground" Variant="BitVariant.Outline">PrimaryForeground</BitButton>
<BitButton IsEnabled="false" Color="BitColor.PrimaryForeground" Variant="BitVariant.Text">PrimaryForeground</BitButton>

<BitButton IsEnabled="false" Color="BitColor.SecondaryForeground">SecondaryForeground</BitButton>
<BitButton IsEnabled="false" Color="BitColor.SecondaryForeground" Variant="BitVariant.Outline">SecondaryForeground</BitButton>
<BitButton IsEnabled="false" Color="BitColor.SecondaryForeground" Variant="BitVariant.Text">SecondaryForeground</BitButton>

<BitButton IsEnabled="false" Color="BitColor.TertiaryForeground">TertiaryForeground</BitButton>
<BitButton IsEnabled="false" Color="BitColor.TertiaryForeground" Variant="BitVariant.Outline">TertiaryForeground</BitButton>
<BitButton IsEnabled="false" Color="BitColor.TertiaryForeground" Variant="BitVariant.Text">TertiaryForeground</BitButton>

<BitButton IsEnabled="false" Color="BitColor.PrimaryBorder">PrimaryBorder</BitButton>
<BitButton IsEnabled="false" Color="BitColor.PrimaryBorder" Variant="BitVariant.Outline">PrimaryBorder</BitButton>
<BitButton IsEnabled="false" Color="BitColor.PrimaryBorder" Variant="BitVariant.Text">PrimaryBorder</BitButton>

<BitButton IsEnabled="false" Color="BitColor.SecondaryBorder">SecondaryBorder</BitButton>
<BitButton IsEnabled="false" Color="BitColor.SecondaryBorder" Variant="BitVariant.Outline">SecondaryBorder</BitButton>
<BitButton IsEnabled="false" Color="BitColor.SecondaryBorder" Variant="BitVariant.Text">SecondaryBorder</BitButton>

<BitButton IsEnabled="false" Color="BitColor.TertiaryBorder">TertiaryBorder</BitButton>
<BitButton IsEnabled="false" Color="BitColor.TertiaryBorder" Variant="BitVariant.Outline">TertiaryBorder</BitButton>
<BitButton IsEnabled="false" Color="BitColor.TertiaryBorder" Variant="BitVariant.Text">TertiaryBorder</BitButton>
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:




















Disabled:

















External Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<BitButton Icon="@("fa-solid fa-house")" Variant="BitVariant.Fill">
    House (Icon="@@("fa-solid fa-house")")
</BitButton>
        
<BitButton Icon="@BitIconInfo.Css("fa-solid fa-heart")" Variant="BitVariant.Outline" Color="BitColor.Secondary">
    Heart (Icon="@@BitIconInfo.Css("fa-solid fa-heart")")
</BitButton>
        
<BitButton Icon="@BitIconInfo.Fa("brands github")" Variant="BitVariant.Text" Color="BitColor.Tertiary">
    GitHub (Icon="@@BitIconInfo.Fa("brands github")")
</BitButton>
        
<BitButton Icon="@BitIconInfo.Fa("solid rocket")" Variant="BitVariant.Fill" Color="BitColor.Error">
    Rocket (Icon="@@BitIconInfo.Fa("solid rocket")")
</BitButton>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<BitButton Icon="@("bi bi-house-fill")" Variant="BitVariant.Fill">
    House (Icon="@@("bi bi-house-fill")")
</BitButton>
        
<BitButton Icon="@BitIconInfo.Css("bi bi-heart-fill")" Variant="BitVariant.Outline" Color="BitColor.Secondary">
    Heart (Icon="@@BitIconInfo.Css("bi bi-heart-fill")")
</BitButton>
        
<BitButton Icon="@BitIconInfo.Bi("github")" Variant="BitVariant.Text" Color="BitColor.Tertiary">
    GitHub (Icon="@@BitIconInfo.Bi("github")")
</BitButton>
        
<BitButton Icon="@BitIconInfo.Bi("gear-fill")" Variant="BitVariant.Fill" Color="BitColor.Error">
    Gear (Icon="@@BitIconInfo.Bi("gear-fill")")
</BitButton>
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

<style>
    .custom-class {
        border-radius: 1rem;
        border-color: blueviolet;
        transition: background-color 1s;
        background: linear-gradient(90deg, magenta, transparent) blue;
    }

    .custom-class:hover {
        border-color: magenta;
        background-color: magenta;
    }

    .custom-content {
        gap: 0.5rem;
        display: flex;
        align-items: center;
    }

    .custom-root {
        color: aqua;
        min-width: 7.2rem;
        font-weight: bold;
        border-radius: 1rem;
        border-color: aqua;
        box-shadow: aqua 0 0 0.5rem;
    }

    .custom-root:hover {
        color: black;
        background-color: aqua;
    }

    .custom-container {
        text-shadow: tomato 0 0 0.5rem;
    }

    .custom-spinner {
        border-color: red;
        border-top-color: goldenrod;
    }
</style>


<BitButton Style="background-color: transparent; border-color: blueviolet; color: blueviolet;"
           SecondaryText="this is the secondary text"
           Variant="BitVariant.Outline">
    Styled Button
</BitButton>

<BitButton Class="custom-class">
    Classed Button
</BitButton>


<BitButton IsLoading="stylesIsLoading"
           LoadingLabel="Wait..."
           OnClick="LoadingStylesClick"
           Styles="@(new() { Root = "background-color: peachpuff; border-color: peachpuff; min-width: 6rem;",
                             LoadingLabel = "color: tomato; font-weight: bold;",
                             Spinner = "border-color: tomato; border-top-color: goldenrod;" })">
    Click me
</BitButton>

<BitButton IsLoading="classesIsLoading"
           LoadingLabel="Sending..."
           OnClick="LoadingClassesClick"
           Variant="BitVariant.Outline"
           Classes="@(new() { Root = "custom-root",
                              LoadingContainer = "custom-container",
                              Spinner = "custom-spinner" })">
    Click me
</BitButton>
@code {
    private bool stylesIsLoading;
    private bool classesIsLoading;
    
    private async Task LoadingStylesClick()
    {
        stylesIsLoading = true;
        await Task.Delay(3000);
        stylesIsLoading = false;
    }
    
    private async Task LoadingClassesClick()
    {
        classesIsLoading = true;
        await Task.Delay(3000);
        classesIsLoading = false;
    }
}
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

<BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Fill">
    دکمه با آیکن
</BitButton>
<BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Outline">
    دکمه با آیکن
</BitButton>
<BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Text">
    دکمه با آیکن
</BitButton>

<BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Fill" SecondaryText="این متن ثانویه است">
    دکمه با آیکن
</BitButton>
<BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Outline" SecondaryText="این متن ثانویه است">
    دکمه با آیکن
</BitButton>
<BitButton Dir="BitDir.Rtl" IconName="@BitIconName.Emoji" Variant="BitVariant.Text" SecondaryText="این متن ثانویه است">
    دکمه با آیکن
</BitButton>

<BitButton IsLoading Dir="BitDir.Rtl" LoadingLabel="در حال بارگذاری" Variant="BitVariant.Fill" />
<BitButton IsLoading Dir="BitDir.Rtl" LoadingLabel="در حال بارگذاری" Variant="BitVariant.Outline" />
<BitButton IsLoading Dir="BitDir.Rtl" LoadingLabel="در حال بارگذاری" Variant="BitVariant.Text" />
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.
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.

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.