Ant Design Blazor
Button
To trigger an operation.
When To Use
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
In Ant Design we provide 4 types of button.
- Primary button: indicate the main action, one primary button at most in one section.
- Default button: indicate a series of actions without priority.
- Dashed button: used for adding action commonly.
- Link button: used for external links.
And 4 other properties additionally.
danger: used for actions of risk, like deletion or authorization.ghost: used in situations with complex background, home pages usually.disabled: when actions is not available.loading: add loading spinner in button, avoiding multiple submits too.
Examples
There are primary button, default button, dashed button and link button in antd.
Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.
A loading indicator can be added to a button by setting the Loading parameter on the Button.
Use the AutoLoading parameter to automatically add and deactivate load states for asynchronous methods that bind the OnClick callback.
ghost property will make button's background transparent, it is commonly used in colored background.
block property will make the button fit to its parent width.
Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.
To mark a button as disabled, add the disabled property to the Button.
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into DropdownButton.
danger is a property of button after antd 4.0.
DownloadButton provides a simple implementation of file download, which may meet the needs of most situations.
When Url is null or empty, this button won't trigger file download.
FileName is actually the download attribute of <a/>. About its description and limit, please read MDN Doc.
Button API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| AriaLabel | ParameterSets the value of the aria-label attribute | String | -- |
| Color | ParameterSet the color of the button. | Color | Color.None |
| Block | ParameterOption to fit button width to its parent width | Boolean | false |
| ChildContent | ParameterContent of the button. | RenderFragment | -- |
| Danger | ParameterSet the danger status of button. | Boolean | false |
| Disabled | ParameterWhether the `Button` is disabled. | Boolean | false |
| Ghost | ParameterMake background transparent and invert text and border colors | Boolean | false |
| HtmlType | ParameterSet the original html type of the button element. | String | button |
| Icon | ParameterSet the icon component of button. | String | -- |
| Loading | ParameterShow loading indicator. You have to write the loading logic on your own. | Boolean | false |
| AutoLoading | ParameterWhether to trigger and keep the loading state until the event callback is done. | Boolean | -- |
| OnClick | ParameterCallback when `Button` is clicked | EventCallback<MouseEventArgs> | -- |
| OnClickStopPropagation | ParameterDo not propagate events when button is clicked. | Boolean | -- |
| Shape | ParameterCan set button shape: `circle` | `round` or `null` (default, which is rectangle). | ButtonShape | null |
| Size | ParameterSet the size of button. | ButtonSize | ButtonSize.Default |
| Type | ParameterType of the button. | ButtonType? | ButtonType.Default |
| NoSpanWrap | ParameterDo not wrap with <span> | Boolean | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
DownloadButton API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Url | ParameterThe download url of a file | String | -- |
| FileName | ParameterName of the file | String | -- |
| AriaLabel | ParameterSets the value of the aria-label attribute | String | -- |
| Color | ParameterSet the color of the button. | Color | Color.None |
| Block | ParameterOption to fit button width to its parent width | Boolean | false |
| ChildContent | ParameterContent of the button. | RenderFragment | -- |
| Danger | ParameterSet the danger status of button. | Boolean | false |
| Disabled | ParameterWhether the `Button` is disabled. | Boolean | false |
| Ghost | ParameterMake background transparent and invert text and border colors | Boolean | false |
| HtmlType | ParameterSet the original html type of the button element. | String | button |
| Icon | ParameterSet the icon component of button. | String | -- |
| Loading | ParameterShow loading indicator. You have to write the loading logic on your own. | Boolean | false |
| AutoLoading | ParameterWhether to trigger and keep the loading state until the event callback is done. | Boolean | -- |
| OnClick | ParameterCallback when `Button` is clicked | EventCallback<MouseEventArgs> | -- |
| OnClickStopPropagation | ParameterDo not propagate events when button is clicked. | Boolean | -- |
| Shape | ParameterCan set button shape: `circle` | `round` or `null` (default, which is rectangle). | ButtonShape | null |
| Size | ParameterSet the size of button. | ButtonSize | ButtonSize.Default |
| Type | ParameterType of the button. | ButtonType? | ButtonType.Default |
| NoSpanWrap | ParameterDo not wrap with <span> | Boolean | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |