ActionButton

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

Usage

Basic

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

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

IconPosition

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

Using the IconPosition parameter and BitIconPosition enum as its value:

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

Href

Turn BitActionButton into a link using the Href parameter, and choose whether it opens in the current tab or a new one.

Open bitplatform.dev in a new tab

Go to bitplatform GitHub

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

Rel

Attach rel attribute values (e.g., nofollow, noreferrer) when using BitActionButton as an external link.

The actual rel attribute value is generated using the provided BitLinkRels and Href value.

Open bitplatform.dev with a rel attribute (nofollow)

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

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

Rich content

You can put richer content inside BitActionButton with a custom template (text plus spinner in this example).

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

ButtonType

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

<EditForm Model="validationButtonModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <ValidationSummary />

    <BitTextField Label="Required" Required @bind-Value="validationButtonModel.RequiredText" />
    <ValidationMessage For="() => validationButtonModel.RequiredText" style="color:red" />

    <BitTextField Label="Nonrequired" @bind-Value="validationButtonModel.NonRequiredText" />

    <div>
        <BitActionButton IconName="@BitIconName.SendMirrored" ButtonType="BitButtonType.Submit">
            Submit
        </BitActionButton>
        <BitActionButton IconName="@BitIconName.Reset" ButtonType="BitButtonType.Reset">
            Reset
        </BitActionButton>
        <BitActionButton IconName="@BitIconName.ButtonControl" ButtonType="BitButtonType.Button">
            Button
        </BitActionButton>
    </div>
</EditForm>
@code {
    public class ButtonValidationModel
    {
        [Required]
        public string RequiredText { get; set; } = string.Empty;
    
        public string? NonRequiredText { get; set; }
    }
    
    private ButtonValidationModel validationButtonModel = new();
    
    private async Task HandleValidSubmit()
    {
        await Task.Delay(2000);
    
        validationButtonModel = new();
    
        StateHasChanged();
    }
}

FullWidth

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

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

Color

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

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

<BitActionButton Color="BitColor.Primary" IconName="@BitIconName.ColorSolid">
    Primary
</BitActionButton>
<BitActionButton Color="BitColor.Primary">
    Primary
</BitActionButton>

<BitActionButton Color="BitColor.Secondary" IconName="@BitIconName.ColorSolid">
    Secondary
</BitActionButton>
<BitActionButton Color="BitColor.Secondary">
    Secondary
</BitActionButton>

<BitActionButton Color="BitColor.Tertiary" IconName="@BitIconName.ColorSolid">
    Tertiary
</BitActionButton>
<BitActionButton Color="BitColor.Tertiary">
    Tertiary
</BitActionButton>

<BitActionButton Color="BitColor.Info" IconName="@BitIconName.ColorSolid">
    Info
</BitActionButton>
<BitActionButton Color="BitColor.Info">
    Info
</BitActionButton>

<BitActionButton Color="BitColor.Success" IconName="@BitIconName.ColorSolid">
    Success
</BitActionButton>
<BitActionButton Color="BitColor.Success">
    Success
</BitActionButton>

<BitActionButton Color="BitColor.Warning" IconName="@BitIconName.ColorSolid">
    Warning
</BitActionButton>
<BitActionButton Color="BitColor.Warning">
    Warning
</BitActionButton>

<BitActionButton Color="BitColor.SevereWarning" IconName="@BitIconName.ColorSolid">
    SevereWarning
</BitActionButton>
<BitActionButton Color="BitColor.SevereWarning">
    SevereWarning
</BitActionButton>

<BitActionButton Color="BitColor.Error" IconName="@BitIconName.ColorSolid">
    Error
</BitActionButton>
<BitActionButton Color="BitColor.Error">
    Error
</BitActionButton>

<BitActionButton Color="BitColor.PrimaryBackground" IconName="@BitIconName.ColorSolid">
    PrimaryBackground
</BitActionButton>
<BitActionButton Color="BitColor.PrimaryBackground">
    PrimaryBackground
</BitActionButton>

<BitActionButton Color="BitColor.SecondaryBackground" IconName="@BitIconName.ColorSolid">
    SecondaryBackground
</BitActionButton>
<BitActionButton Color="BitColor.SecondaryBackground">
    SecondaryBackground
</BitActionButton>

<BitActionButton Color="BitColor.TertiaryBackground" IconName="@BitIconName.ColorSolid">
    TertiaryBackground
</BitActionButton>
<BitActionButton Color="BitColor.TertiaryBackground">
    TertiaryBackground
</BitActionButton>

<BitActionButton Color="BitColor.PrimaryForeground" IconName="@BitIconName.ColorSolid">
    PrimaryForeground
</BitActionButton>
<BitActionButton Color="BitColor.PrimaryForeground">
    PrimaryForeground
</BitActionButton>

<BitActionButton Color="BitColor.SecondaryForeground" IconName="@BitIconName.ColorSolid">
    SecondaryForeground
</BitActionButton>
<BitActionButton Color="BitColor.SecondaryForeground">
    SecondaryForeground
</BitActionButton>

<BitActionButton Color="BitColor.TertiaryForeground" IconName="@BitIconName.ColorSolid">
    TertiaryForeground
</BitActionButton>
<BitActionButton Color="BitColor.TertiaryForeground">
    TertiaryForeground
</BitActionButton>

<BitActionButton Color="BitColor.PrimaryBorder" IconName="@BitIconName.ColorSolid">
    PrimaryBorder
</BitActionButton>
<BitActionButton Color="BitColor.PrimaryBorder">
    PrimaryBorder
</BitActionButton>

<BitActionButton Color="BitColor.SecondaryBorder" IconName="@BitIconName.ColorSolid">
    SecondaryBorder
</BitActionButton>
<BitActionButton Color="BitColor.SecondaryBorder">
    SecondaryBorder
</BitActionButton>

<BitActionButton Color="BitColor.TertiaryBorder" IconName="@BitIconName.ColorSolid">
    TertiaryBorder
</BitActionButton>
<BitActionButton Color="BitColor.TertiaryBorder">
    TertiaryBorder
</BitActionButton>

Size

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

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

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

Style & Class

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

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

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

RTL

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

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

API

BitActionButton parameters

Name	Type	Default value	Description
AllowDisabledFocus	bool	false	Keeps the disabled action button focusable by not forcing a negative tabindex when IsEnabled is false.
AriaDescription	string?	null	Detailed description of the button for the benefit of screen readers (rendered into aria-describedby).
AriaHidden	bool	false	If true, adds an aria-hidden attribute instructing screen readers to ignore the button.
ButtonType	BitButtonType	null	The type of the button element; defaults to submit inside an EditForm otherwise button.
ChildContent	RenderFragment?	null	The custom body of the action button (text and/or any render fragment).
Classes	BitActionButtonClassStyles?	null	Custom CSS classes for the root, icon, and content sections of the action button.
Color	BitColor?	null	The general color of the button that applies to the icon and text of the action button.
EditContext	EditContext?	null	The EditContext, which is set if the button is inside an EditForm. The value is coming from the cascading value provided by the EditForm.
FullWidth	bool	false	Gets or sets a value indicating whether the component should expand to occupy the full available width.
Href	string?	null	The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button.
IconName	string?	null	Gets or sets the name of the icon to display.
IconOnly	bool	false	Gets or sets a value indicating whether only the icon is displayed, without accompanying text.
IconPosition	BitIconPosition?	null	Gets or sets the position of the icon relative to the component's content.
OnClick	EventCallback<MouseEventArgs>		Gets or sets the callback that is invoked when the component is clicked.
Styles	BitActionButtonClassStyles?	null	Gets or sets the custom CSS inline styles to apply to the action button component.
Rel	BitLinkRels?	null	Gets or sets the relationship type between the current element and the linked resource, as defined by the link's rel attribute.
Size	BitSize?	null	Sets the preset size (Small, Medium, Large) for typography and padding of the action button.
Target	string?	null	Gets or sets the name of the target frame or window for the navigation action when the action button renders as an anchor (by providing the Href parameter).
Title	string?	null	The tooltip to show when the mouse is placed on the button.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	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.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
IsEnabled	bool	true	Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitActionButtonClassStyles properties

Defines per-part CSS class/style values for BitActionButton.

Name	Type	Default value	Description
Root	string?	null	Custom class or style applied to the root element of the BitActionButton.
Icon	string?	null	Custom class or style applied to the icon element of the BitActionButton.
Content	string?	null	Custom class or style applied to the content container of the BitActionButton.

BitButtonType enum

Name	Value	Description
Button	0	The button is a clickable button.
Submit	1	The button is a submit button (submits form-data).
Reset	2	The button is a reset button (resets the form-data to its initial values).

BitColor enum

Name	Value	Description
Primary	0	Info Primary general color.
Secondary	1	Secondary general color.
Tertiary	2	Tertiary general color.
Info	3	Info general color.
Success	4	Success general color.
Warning	5	Warning general color.
SevereWarning	6	SevereWarning general color.
Error	7	Error general color.
PrimaryBackground	8	Primary background color.
SecondaryBackground	9	Secondary background color.
TertiaryBackground	10	Tertiary background color.
PrimaryForeground	11	Primary foreground color.
SecondaryForeground	12	Secondary foreground color.
TertiaryForeground	13	Tertiary foreground color.
PrimaryBorder	14	Primary border color.
SecondaryBorder	15	Secondary border color.
TertiaryBorder	16	Tertiary border color.

BitSize enum

Name	Value	Description
Small	0	The small size button.
Medium	1	The medium size button.
Large	2	The large size button.

BitIconPosition enum

Name	Value	Description
Start	0	Icon renders before the content (default).
End	1	Icon renders after the content.

BitLinkRels enum

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

BitVisibility enum

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

BitDir enum

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

Feedback

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

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

On this page

ActionButton

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

Usage

Basic

IconPosition

Href

Rel

Rich content

ButtonType

FullWidth

Color

Size

Style & Class

RTL

API

BitActionButton parameters

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitActionButtonClassStyles properties

Defines per-part CSS class/style values for BitActionButton.

Name

Type

Default value

Description

BitButtonType enum

Name

Value

Description

BitColor enum

Name

Value

Description

BitSize enum

Name

Value

Description

BitIconPosition enum

Name

Value

Description

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

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.