Button
This documentation provides a comprehensive reference for the
Button component, guiding you through its configuration options.Screenshot #
Button Parameters #
| Name | Type | Default | Required | Description | Added Version |
|---|---|---|---|---|---|
| Active | bool | False | Gets or sets the button active state. | 1.0.0 | |
| AdditionalAttributes | Dictionary<string, object>? | null | Gets or sets additional attributes that will be applied to the component. | 1.0.0 | |
| Block | bool | False | Gets or sets the block level button. | 1.0.0 | |
| ChildContent | RenderFragment? | null | Gets or sets the content to be rendered within the component. | 1.0.0 | |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the component. | 1.0.0 | |
| Color | ButtonColor | None | Gets or sets the button color. | 1.0.0 | |
| Disabled | bool | False | Gets or sets the button disabled state. | 1.0.0 | |
| Id | string? | null | Gets or sets the ID. If not set, a unique ID will be generated. | 1.0.0 | |
| Loading | bool | False | If true, shows the loading spinner or a LoadingTemplate. | 1.0.0 | |
| LoadingTemplate | RenderFragment? | null | Gets or sets the button loading template. | 1.0.0 | |
| LoadingText | string | Loading... | Gets or sets the loading text. LoadingTemplate takes precedence. | 1.0.0 | |
| Outline | bool | False | Gets or sets the button outline. | 1.0.0 | |
| Position | Position | None | Gets or sets the position. Use Position to modify a Badge and position it in the corner of a link or button. | 1.0.0 | |
| Size | ButtonSize | None | Gets or sets the button size. | 1.0.0 | |
| Style | string? | null | Gets or sets the CSS style string that defines the inline styles for the component. | 1.0.0 | |
| TabIndex | int? | null | Gets or sets the button tab index. | 1.0.0 | |
| Target | Target | None | Gets or sets the link button target. | 1.0.0 | |
| To | string? | null | Gets or sets the link button href attribute. | 1.0.0 | |
| TooltipColor | TooltipColor | None | Gets or sets the button tooltip color. | 1.10.0 | |
| TooltipPlacement | TooltipPlacement | Top | Gets or sets the button tooltip placement. | 1.0.0 | |
| TooltipTitle | string? | null | Gets or sets the button tooltip title. | 1.0.0 | |
| Type | ButtonType | Button | Gets or sets the button type. | 1.0.0 |
Button Methods #
| Name | Return type | Description | Added Version |
|---|---|---|---|
| HideLoading() | Void | Hides the loading state and enables the button. | 1.0.0 |
| ShowLoading(string text) | Void | Shows the loading state and disables the button. | 1.0.0 |
ButtonColor Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | Indicates that no explicit color option is selected. | 1.0.0 |
| Primary | 1 | Indicates the primary (emphasis) color option. | 1.0.0 |
| Secondary | 2 | Indicates the secondary (less emphasized) color option. | 1.0.0 |
| Success | 3 | Indicates a success-state color option. | 1.0.0 |
| Danger | 4 | Indicates an error or danger-state color option. | 1.0.0 |
| Warning | 5 | Indicates a warning-state color option. | 1.0.0 |
| Info | 6 | Indicates an informational-state color option. | 1.0.0 |
| Light | 7 | Indicates a light-toned color option. | 1.0.0 |
| Dark | 8 | Indicates a dark-toned color option. | 1.0.0 |
| Link | 9 | Indicates a link-like visual style option. | 1.0.0 |
ButtonSize Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | Indicates that the default size is used. | 1.0.0 |
| ExtraSmall | 1 | Indicates an extra-small size option. | 1.0.0 |
| Small | 2 | Indicates a small size option. | 1.0.0 |
| Medium | 3 | Indicates a medium size option. | 1.0.0 |
| Large | 4 | Indicates a large size option. | 1.0.0 |
| ExtraLarge | 5 | Indicates an extra-large size option. | 1.0.0 |
ButtonType Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| Button | 0 | Indicates a standard clickable button behavior. | 1.0.0 |
| Submit | 1 | Indicates a submit action for the nearest associated form. | 1.0.0 |
| Reset | 2 | Indicates a reset action for the nearest associated form. | 1.0.0 |
| Link | 3 | Indicates a navigation-style behavior typically rendered as a link. | 1.0.0 |
Position Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | No position will be applied to an element. | 1.7.0 |
| Static | 1 | The element is positioned according to the normal flow of the document. | 1.7.0 |
| Relative | 2 | The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. | 1.7.0 |
| Absolute | 3 | The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. | 1.7.0 |
| Fixed | 4 | The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. | 1.7.0 |
| Sticky | 5 | The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. | 1.7.0 |
Target Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | Indicates that no target value is specified. | 1.0.0 |
| Blank | 1 | Indicates that the link should open in a new browsing context. | 1.0.0 |
| Parent | 2 | Indicates that the link should open in the parent browsing context. | 1.0.0 |
| Self | 3 | Indicates that the link should open in the current browsing context. | 1.0.0 |
| Top | 4 | Indicates that the link should open in the top-level browsing context. | 1.0.0 |
TooltipColor Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| None | 0 | Indicates that no explicit color option is selected. | 1.10.0 |
| Primary | 1 | Indicates the primary (emphasis) color option. | 1.10.0 |
| Secondary | 2 | Indicates the secondary (less emphasized) color option. | 1.10.0 |
| Success | 3 | Indicates a success-state color option. | 1.10.0 |
| Danger | 4 | Indicates an error or danger-state color option. | 1.10.0 |
| Warning | 5 | Indicates a warning-state color option. | 1.10.0 |
| Info | 6 | Indicates an informational-state color option. | 1.10.0 |
| Light | 7 | Indicates a light-toned color option. | 1.10.0 |
| Dark | 8 | Indicates a dark-toned color option. | 1.10.0 |
TooltipPlacement Enum #
| Name | Value | Description | Added Version |
|---|---|---|---|
| Auto | 0 | Dynamically reorient the tooltip. | 1.0.0 |
| Top | 1 | Top side. | 1.0.0 |
| Bottom | 2 | Bottom side. | 1.0.0 |
| Left | 3 | Left side. | 1.0.0 |
| Right | 4 | Right side. | 1.0.0 |
