Accent color
# ActionButton
## Description
ActionButton is a lightweight, icon-first flavor of button with a transparent background and colorized text and icon, ideal for inline actions like New, Edit, or Share. It renders as a native button or, when given an Href, as a link with hardened navigation attributes. It also ships with full loading support (AutoLoading with double-click protection, loading label, and delayed spinner) and accessible disabled and loading semantics out of the box.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AllowDisabledFocus | `bool` | false | Keeps the disabled action button focusable and discoverable by assistive technologies, conveying the disabled state using aria-disabled instead of the native disabled attribute. |
| AriaDescription | `string?` | null | Detailed description of the button for the benefit of screen readers (rendered into aria-describedby). |
| AriaHidden | `bool` | false | If true, adds an aria-hidden attribute instructing screen readers to ignore the button. |
| AutoLoading | `bool` | false | If true, enters the loading state automatically while awaiting the OnClick event and prevents subsequent clicks by default. |
| ButtonType | `BitButtonType` | null | The type of the button element; defaults to submit inside an EditForm otherwise button. |
| Body | `RenderFragment?` | null | Alias for ChildContent, the custom body of the action button (text and/or any render fragment). |
| ChildContent | `RenderFragment?` | null | The custom body of the action button (text and/or any render fragment). |
| Classes | `BitActionButtonClassStyles?` | null | Custom CSS classes for the root, icon, and content sections of the action button. |
| Color | `BitColor?` | null | The general color of the button that applies to the icon and text of the action button. |
| Download | `string?` | null | The value of the download attribute of the link rendered by the button when the Href parameter is provided. Instructs the browser to download the linked resource instead of navigating to it, using the provided value (if any) as the suggested file name. |
| EditContext | `EditContext?` | null | The EditContext, which is set if the button is inside an EditForm. The value is coming from the cascading value provided by the EditForm. |
| FullWidth | `bool` | false | Gets or sets a value indicating whether the component should expand to occupy the full available width. |
| Href | `string?` | null | The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button. |
| Icon | `BitIconInfo?` | null | Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | `string?` | null | Gets or sets the name of the icon to display from the built-in Fluent UI icons. |
| IconOnly | `bool` | false | Gets or sets a value indicating whether only the icon is displayed, without accompanying text. |
| IconPosition | `BitIconPosition?` | null | Gets or sets the position of the icon relative to the component's content. |
| IsLoading | `bool` | false | Determines whether the action button is in loading mode or not (two-way bindable). |
| LoadingDelay | `int` | 0 | The delay in milliseconds before the loading indicator appears after entering the loading state, useful to avoid a spinner flash for fast operations. The click-guard of the loading state applies immediately regardless of this delay. |
| LoadingLabel | `string?` | null | The text to show next to the spinner while the action button is in the loading state, replacing the button body. It is also announced by screen readers through a status live region when the loading state starts. |
| LoadingTemplate | `RenderFragment?` | null | The custom template used to replace the default loading indicator inside the action button in the loading state. |
| OnClick | `EventCallback<MouseEventArgs>` | | Gets or sets the callback that is invoked when the component is clicked. |
| Reclickable | `bool` | false | Enables re-clicking the action button while it is in the loading state. By default, clicks are ignored while the button is loading to protect against double submissions. |
| Rel | `BitLinkRels?` | null | Gets or sets the relationship type between the current element and the linked resource, as defined by the link's rel attribute. |
| Size | `BitSize?` | null | Sets the preset size (Small, Medium, Large) for typography and padding of the action button. |
| StopPropagation | `bool` | false | If true, stops the propagation of the click event to the parent elements. Useful when the action button is placed inside clickable containers like rows or cards. |
| Styles | `BitActionButtonClassStyles?` | null | Gets or sets the custom CSS inline styles to apply to the action button component. |
| Target | `string?` | null | Gets or sets the name of the target frame or window for the navigation action when the action button renders as an anchor (by providing the Href parameter). When set to _blank and no opener-related Rel is provided, noopener is added to the rel attribute automatically. |
| Title | `string?` | null | The tooltip to show when the mouse is placed on the button. |
| Underlined | `bool` | false | Adds an underline to the action button text, useful for link-style buttons. |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### BitActionButtonClassStyles Properties
Defines per-part CSS class/style values for BitActionButton.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom class or style applied to the root element of the BitActionButton. |
| Icon | `string?` | null | Custom class or style applied to the icon element of the BitActionButton. |
| Content | `string?` | null | Custom class or style applied to the content container of the BitActionButton. |
| LoadingLabel | `string?` | null | Custom class or style applied to the loading label element of the BitActionButton. |
| Spinner | `string?` | null | Custom class or style applied to the loading spinner element of the BitActionButton. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## Examples
\n**Basic**:
```razor
Create account
Disabled
AriaLabel="Call"
No Icon
Start (default)
End
```
\n**Href**:
```razor
Open bitplatform.dev in a new tab
Go to bitplatform GitHub
```
\n**Download**:
```razor
Download the logo
Download with a custom file name
```
\n**Rel**:
```razor
Open bitplatform.dev with a rel attribute (nofollow)
Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
```
\n**Rich content**:
```razor
```
\n**ButtonType**:
```razor
@if (formIsValidSubmit is false)
{
Submit
Reset
Button
}
else
{
The form submitted successfully.
}
```
```csharp
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;
}
```
\n**FullWidth**:
```razor
FullWidth
FullWidth with end icon
```
\n**Loading**:
```razor
Save changes
Upload file
Send message
AutoLoading
AutoLoading with LoadingLabel
AutoLoading with LoadingDelay
Guarded (@guardedClickCount)
Reclickable (@reclickableClickCount)
```
```csharp
private bool isLoading;
private int guardedClickCount;
private int reclickableClickCount;
private async Task HandleAutoLoadingClick()
{
await Task.Delay(2000);
}
private async Task HandleGuardedClick()
{
guardedClickCount++;
await Task.Delay(2000);
}
private async Task HandleReclickableClick()
{
reclickableClickCount++;
await Task.Delay(2000);
}
```
\n**LoadingTemplate**:
```razor
Download
```
```csharp
private bool templateIsLoading;
```
\n**Underlined**:
```razor
Link style
Open GitHub
More info
```
\n**Color**:
```razor
Primary
Primary
Secondary
Secondary
Tertiary
Tertiary
Info
Info
Success
Success
Warning
Warning
SevereWarning
SevereWarning
Error
Error
PrimaryBackground
PrimaryBackground
SecondaryBackground
SecondaryBackground
TertiaryBackground
TertiaryBackground
PrimaryForeground
PrimaryForeground
SecondaryForeground
SecondaryForeground
TertiaryForeground
TertiaryForeground
PrimaryBorder
PrimaryBorder
SecondaryBorder
SecondaryBorder
TertiaryBorder
TertiaryBorder
Primary
Secondary
Tertiary
Info
Success
Warning
SevereWarning
Error
PrimaryBackground
SecondaryBackground
TertiaryBackground
PrimaryForeground
SecondaryForeground
TertiaryForeground
PrimaryBorder
SecondaryBorder
TertiaryBorder
```
\n**External Icons**:
```razor
House (Icon=@@("fa-solid fa-house"))
Heart (Icon="@@BitIconInfo.Css("fa-solid fa-heart")")
GitHub (Icon="@@BitIconInfo.Fa("fa-brands fa-github")")
Rocket (Icon="@@BitIconInfo.Fa("solid rocket")")
House (Icon=@@("bi bi-house-fill"))
Heart (Icon="@@BitIconInfo.Css("bi bi-heart-fill")")
GitHub (Icon="@@BitIconInfo.Bi("github")")
Gear (Icon="@@BitIconInfo.Bi("gear-fill")")
```
\n**Size**:
```razor
Small
Medium
Large
```
\n**Events**:
```razor
Click me (@clickCounter)
Hover me
Disabled (skipped by Tab)
Disabled (still focusable)
```
\n**Style & Class**:
```razor
Action Button Styles
Action Button Classes (Hover me)
```
\n**RTL**:
```razor
ساخت حساب
```
This is a custom template
Row clicks: @rowClickCount | Button clicks: @innerClickCount
Bubbles up
StopPropagation
```
```csharp
private int clickCounter;
private int rowClickCount;
private int innerClickCount;
```
\n**Title**:
```razor