logo

Button

Examples

There are primary button, default button, dashed button and link button in antd.

expand code expand code

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.

expand code expand code

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.

expand code expand code

ghost property will make button's background transparent, it is commonly used in colored background.

expand code expand code

block property will make the button fit to its parent width.

expand code expand code

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.

expand code expand code

To mark a button as disabled, add the disabled property to the Button.

expand code expand code

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.

expand code expand code

danger is a property of button after antd 4.0.

expand code expand code

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.

expand code expand code

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). String null
Size ParameterSet the size of button. String AntSizeLDSType.Default
Type ParameterType of the button. String 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). String null
Size ParameterSet the size of button. String AntSizeLDSType.Default
Type ParameterType of the button. String 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 --
Introduce Icon
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.