Button

Buttons enable users to take actions with a single tap. They're commonly used in forms, dialog panels, and specialized for tasks like navigation or repeated actions.

Usage

Basic

<BitButton>Button</BitButton>

Primary & Secondary

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

<BitButton SecondaryText="this is the secondary text">Primary text</BitButton>

Variant

The Button offers three style variants: Fill (default), Outline, and Text.

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

Icon

BitButton has an icon slot that, if specified, renders an icon that can be set at the start (default) or revered positioned at the end of component.

<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" ReversedIcon>End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Outline" ReversedIcon>End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" Variant="BitVariant.Text" ReversedIcon>End</BitButton>

<BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Fill" ReversedIcon>End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Outline" ReversedIcon>End</BitButton>
<BitButton IconName="@BitIconName.Emoji2" SecondaryText="this is the secondary text" Variant="BitVariant.Text" ReversedIcon>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" ReversedIcon>End</BitButton>
<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Outline" ReversedIcon>End</BitButton>
<BitButton IconUrl="/images/bit-logo.svg" SecondaryText="IconUrl" Variant="BitVariant.Text" ReversedIcon>End</BitButton>

Loading

Demonstrate the dynamic loading state of buttons using the "IsLoading" property. Customize the loading label to provide users with feedback on ongoing processes.

AutoLoading:

AutoLoading click count: 0

Re-clickable AutoLoading click count: 0

<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>Reclickable 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;
    }
}

Loading Label

Explore customizing the loading label and its different positions, including start, end, bottom, and top.

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

Href

Use BitButton as a hyperlink to external URLs, opening either in a new tab or the same tab.

Open bitplatform.dev

Go to bitplatform GitHub

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

Rel

Use BitButton as a hyperlink to external URLs, with a rel attribute.

Open bitplatform.dev with a rel attribute (nofollow)

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

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

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

Float & Draggable

Demonstrates a floating button with adjustable float modes and customizable positions.

FloatOffset

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.

<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;
    private BitPosition floatPosition = BitPosition.BottomRight;
    
    private readonly List<BitDropdownItem<BitPosition>> floatPositionList = Enum.GetValues<BitPosition>()
                                                                                .Cast<BitPosition>()
                                                                                .Select(enumValue => new BitDropdownItem<BitPosition>
                                                                                {
                                                                                    Value = enumValue,
                                                                                    Text = enumValue.ToString()
                                                                                })
                                                                                .ToList();
}

Button Type

BitButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes.

<EditForm Model="buttonValidationModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <BitTextField Label="Required" Required @bind-Value="buttonValidationModel.RequiredText" />
    <ValidationMessage For="() => buttonValidationModel.RequiredText" style="color:red" />
    <BitTextField Label="Nonrequired" @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>
@code {
    public class ButtonValidationModel
    {
        [Required]
        public string RequiredText { get; set; } = string.Empty;
        public string? NonRequiredText { get; set; }
    }
    
    private ButtonValidationModel buttonValidationModel = new();
    
    private async Task HandleValidSubmit()
    {
        await Task.Delay(2000);
    
        buttonValidationModel = new();
    
        StateHasChanged();
    }
}

Templates

Here are some examples of customizing the button content.

Utilize the "LoadingTemplate" feature to design personalized loading indicators and messages, providing a unique visual experience during loading states.

<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 Size="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;
    }
}

Events

Managing button click event (OnClick).

<BitButton OnClick="() => clickCounter++">Click me (@clickCounter)</BitButton>
@code {
    private int clickCounter;
}

Size

Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.

Small:

Medium:

Large:

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

FullWidth

Setting the FullWidth makes the button occupy 100% of its container's width.

<BitButton FullWidth IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Full Width Button</BitButton>

FixedColor

FixedColor flag parameter makes the foreground color to be fixed regardless of its hovering state.

<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" />

Color

Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.

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


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


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

Style & Class

Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style & Class:

Styles & Classes:

<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;
    }
}

RTL

Use BitButton in right-to-left (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" />

API

BitButton parameters

Name	Type	Default value	Description
AllowDisabledFocus	bool	true	Whether the button can have focus in disabled mode.
AriaDescription	string?	null	Detailed description of the button for the benefit of screen readers.
AriaHidden	bool	false	If true, adds an aria-hidden attribute instructing screen readers to ignore the element.
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 value of the type attribute of the 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.
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	bool	false	Specifies the position of the floating button.
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.
IconName	string?	null	The name of the icon to render inside the button.
IconOnly	bool	false	Determines that only the icon should be rendered.
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>		The callback for the click event of the button with a bool argument passing 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 in loading state when AutoLoading is enabled.
ReversedIcon	bool	false	Reverses the positions of the icon and the main content of the button.
Rel	BitLinkRel?	null	If Href provided, specifies the relationship between the current document and the linked document.
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	The size of the button.
Styles	BitButtonClassStyles?	null	Custom CSS 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).
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	The aria-label of the control for the benefit of screen readers.
Class	string?	null	Custom CSS class for the root element of the component.
Dir	BitDir?	null	Determines the component direction.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Capture and render additional attributes in addition to the component's parameters.
Id	string?	null	Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled	bool	true	Whether or not the component is enabled.
Style	string?	null	Custom CSS style for the root element of the component.
Visibility	BitVisibility	BitVisibility.Visible	Whether the component is visible, hidden or collapsed.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement	ElementReference		The ElementReference of the root element.

BitButtonClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitButton.
Icon	string?	null	Custom CSS classes/styles for the icon of the BitButton.
Container	string?	null	Custom CSS classes/styles for the internal container of the BitButton.
Primary	string?	null	Custom CSS classes/styles for the primary section of the BitButton.
Secondary	string?	null	Custom CSS classes/styles for the secondary section of the BitButton.
LoadingContainer	string?	null	Custom CSS classes/styles for the loading container of the BitButton.
Spinner	string?	null	Custom CSS classes/styles for the spinner section of the BitButton.
LoadingLabel	string?	null	Custom CSS classes/styles for the loading label section of the BitButton.

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

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.

BitLinkRel enum

Name	Value	Description
Alternate	1	Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror)
Author	2	Provides a link to the author of the document.
Bookmark	4	Permanent URL used for bookmarking.
External	8	Indicates that the referenced document is not part of the same site as the current document.
Help	16	Provides a link to a help document.
License	32	Provides a link to licensing information for the document.
Next	64	Provides a link to the next document in the series.
NoFollow	128	Links to an unendorsed document, like a paid link. ("NoFollow" is used by Google, to specify that the Google search spider should not follow that link)
NoOpener	256	Requires that any browsing context created by following the hyperlink must not have an opener browsing context.
NoReferrer	512	Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink.
Prev	1024	The previous document in a selection.
Search	2048	Links to a search tool for the document.
Tag	4096	A tag (keyword) for the current document.

BitPosition enum

Name	Value	Description
TopLeft	0
TopCenter	1
TopRight	2
TopStart	3
TopEnd	4
CenterLeft	5
Center	6
CenterRight	7
CenterStart	8
CenterEnd	9
BottomLeft	10
BottomCenter	11
BottomRight	12
BottomStart	13
BottomEnd	14

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

On this page

Button

Buttons enable users to take actions with a single tap. They're commonly used in forms, dialog panels, and specialized for tasks like navigation or repeated actions.

Usage

Basic

Primary & Secondary

Variant

Icon

Loading

Loading Label

Href

Rel

Float & Draggable

Button Type

Templates

Events

Size

FullWidth

FixedColor

Color

Style & Class

RTL

API

BitButton parameters

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitButtonClassStyles properties

Name

Type

Default value

Description

BitVariant enum

Name

Value

Description

BitColor enum

Name

Value

Description

BitSize enum

Name

Value

Description

BitButtonType enum

Name

Value

Description

BitLabelPosition enum

Name

Value

Description

BitLinkRel enum

Name

Value

Description

BitPosition enum

Name

Value

Description

BitVisibility enum

Name

Value

Description

BitDir enum

Name

Value

Description

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.