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.
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:
Href
Turn BitActionButton into a link using the Href parameter, and choose whether it opens in the current tab or a new one.
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.
Rich content
You can put richer content inside BitActionButton with a custom template (text plus spinner in this example).
ButtonType
See submit/reset/button types in action inside a validated form.
FullWidth
Stretch buttons or align content by combining FullWidth and an end-positioned icon.
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:
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:
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:
RTL
View BitActionButton inside a right-to-left layout, respecting RTL direction and icon/text ordering.
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. |
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