InputNumber component API deprecations in v6
In v6, InputNumber deprecations: bordered is replaced by variant; addonAfter is replaced by Space.Compact; addonBefore is replaced by Space.Compact.
components/common-props
165 notes in this subject, read out of this brain and free to use. This is page 2 of 3.
Mentions component API deprecation in v6
In v6, Mentions.Option is deprecated and replaced by options prop.
Menu component children deprecation in v6
In v6, Menu component children prop is deprecated and replaced by items prop.
Modal component API deprecations in v6
In v6, Modal deprecations: bodyStyle replaced by styles.body; maskStyle replaced by styles.mask; destroyOnClose replaced by destroyOnHidden. Starting from 6.3.0, maskClosable is replaced by mask.closable. Starting from 6.2.0, focusTriggerAfterClose is replaced by focusable.focusTriggerAfterClose.
Notification component API deprecations in v6
In v6, Notification deprecations: btn is replaced by actions; message is replaced by title.
Progress component API deprecations in v6
In v6, Progress deprecations: strokeWidth replaced by size; width replaced by size; trailColor replaced by railColor; gapPosition replaced by gapPlacement.
Select component API deprecations in v6
In v6, Select deprecations: dropdownMatchSelectWidth replaced by popupMatchSelectWidth; dropdownStyle replaced by styles.popup.root; dropdownClassName replaced by classNames.popup.root; popupClassName replaced by classNames.popup.root; dropdownRender replaced by popupRender; onDropdownVisibleChange replaced by onOpenChange; bordered replaced by variant; showArrow is deprecated and will become default behavior, set suffixIcon to null to hide.
Slider component API deprecations in v6
In v6, Slider deprecations: tooltipPrefixCls replaced by tooltip.prefixCls; getTooltipPopupContainer replaced by tooltip.getPopupContainer; tipFormatter replaced by tooltip.formatter; tooltipPlacement replaced by tooltip.placement; tooltipVisible replaced by tooltip.open; onAfterChange replaced by onChangeComplete; handleStyle replaced by styles.handle; trackStyle replaced by styles.track; railStyle replaced by styles.rail.
Space.Compact component direction deprecation in v6
In v6, Space.Compact component direction prop is deprecated and replaced by orientation.
Space component API deprecations in v6
In v6, Space deprecations: direction is replaced by orientation; split is replaced by separator.
Spin component API deprecations in v6
In v6, Spin deprecations: wrapperClassName is replaced by classNames.root. Starting from 6.3.0, tip is replaced by description. Starting from 6.3.2, size="default" is replaced by size="medium".
Splitter component layout deprecation in v6
In v6, Splitter layout prop is deprecated and replaced by orientation.
Splitter component collapsibleIcon deprecation in v6.4.0
In v6 starting from 6.4.0, Splitter collapsibleIcon prop is deprecated and replaced by collapsible.icon.
Statistic.Countdown deprecated in v6
In v6, Statistic.Countdown component is deprecated and replaced by Statistic.Timer with type="countdown".
Statistic component valueStyle deprecation in v6
In v6, Statistic component valueStyle prop is deprecated and replaced by styles.content.
Steps component API deprecations in v6
In v6, Steps deprecations: labelPlacement replaced by titlePlacement; progressDot replaced by type="dot"; direction replaced by orientation; items.description replaced by items.content. Starting from 6.3.2, size="default" is replaced by size="medium".
Table component API deprecations in v6
In v6, Table deprecations: pagination.position is replaced by pagination.placement; onSelectInvert is replaced by onChange; filterDropdownOpen is replaced by filterDropdownProps.open; onFilterDropdownOpenChange is replaced by filterDropdownProps.onOpenChange; filterCheckall is replaced by locale.filterCheckAll; onSelectMultiple is replaced by onChange; onSelectAll is replaced by onChange; onSelectNone is replaced by onChange.
Tabs component API deprecations in v6
In v6, Tabs deprecations: popupClassName replaced by classNames.popup; tabPosition replaced by tabPlacement; destroyInactiveTabPane replaced by destroyOnHidden; indicatorSize replaced by indicator={{ size: ... }}; Tabs.TabPane is replaced by items.
Tag component API deprecations in v6
In v6, Tag deprecations: bordered={false} is replaced by variant="filled"; color="xxx-inverse" is replaced by variant="solid".
TimePicker component API deprecations in v6
In v6, TimePicker deprecations: addon is replaced by renderExtraFooter; popupClassName is replaced by classNames.popup; popupStyle is replaced by styles.popup.
Timeline component API deprecations in v6
In v6, Timeline deprecations: Timeline.Item is replaced by items; Timeline.Item.position is replaced by placement with values left/right changed to start/end; Timeline.Item.label is replaced by title; Timeline.Item.children is replaced by content; Timeline.Item.dot is replaced by icon; pending is replaced by items; pendingDot is replaced by items; mode=left|right is replaced by mode=start|end.
Tooltip component API deprecations in v6
In v6, Tooltip deprecations: overlayStyle replaced by styles.root; overlayInnerStyle replaced by styles.container; overlayClassName replaced by classNames.root; destroyTooltipOnHide replaced by destroyOnHidden.
Transfer component API deprecations in v6
In v6, Transfer deprecations: listStyle replaced by styles.section; operationStyle replaced by styles.actions; operations replaced by actions.
TreeSelect component API deprecations in v6
In v6, TreeSelect deprecations: dropdownMatchSelectWidth replaced by popupMatchSelectWidth; dropdownStyle replaced by styles.popup.root; dropdownClassName replaced by classNames.popup.root; popupClassName replaced by classNames.popup.root; dropdownRender replaced by popupRender; onDropdownVisibleChange replaced by onOpenChange; bordered replaced by variant; showArrow is deprecated and will become default behavior, set suffixIcon to null to hide.
Tag margin adjustment in v6
v6 removes the trailing default margin from the Tag component. If layout or custom styles relied on that implicit spacing, reintroduce it via ConfigProvider: tag={{ styles: { root: { marginInlineEnd: 8 } } }}.
Form.List onFinish behavior changed in v6
In v6, Form.List no longer includes data from unregistered child items in onFinish. Unlike v5 which treated Form.List as a single Field including all data within it, v6 only includes data from registered Form.Item components. Therefore, you no longer need to use getFieldsValue({ strict: true }) to filter out unregistered fields.
Component size enum unification in v6 (6.3.0 – 6.3.2)
v6 progressively unified component size enums to 'large' | 'medium' | 'small'. Avatar, Badge, Card, Progress, Steps, Switch, Spin now use 'medium' instead of 'default'. Descriptions uses 'medium' instead of 'middle' and 'large' instead of 'default'. Table and Divider use 'medium' instead of 'middle'. Old values still work but produce deprecation warnings and will be removed in v7.
Table component with Popconfirm and Delete action example
Example showing Ant Design Table with delete functionality: import { Button, Popconfirm, Table } from 'antd'; const columns = [{ title: 'Name', dataIndex: 'name' }, { title: 'Actions', render(text, record) { return (<Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}><Button>Delete</Button></Popconfirm>); } }]; return <Table rowKey="id" dataSource={products} columns={columns} />;
Alert component: non-intrusive static information display
Alert is a non-blocking information display that does not interrupt the user's current operation. It is displayed at a static position on the page, typically at the top. It remains visible and does not auto-dismiss. Users can click to close it. The close button can be added or hidden based on business needs.
Notification component: global notifications in top-right corner
Notification displays important global system notifications that are actively pushed by the system. They appear in the top-right corner of the system.
Badge component: message aggregation indicator placement
Badge is used for aggregating message notifications. It typically appears in the top-right corner of notification icons or avatars, using a prominent visual form to attract user attention. For more important information with higher user relevance, use numbers for precise notification. For lower-weight messages that users don't particularly care about, use a red dot for notification.
Popover component: carries complex content with links or buttons
Popover is used when a target element has further description and related operations. Content can be collected in a card and displayed based on user interaction behavior. Unlike Tooltip, Popover can carry more complex content such as links or buttons.
Tooltip component: describes pointed objects without complex content
Tooltip is used to accurately describe pointed objects such as icons, graphics, and links. It displays on mouse hover and disappears on mouse leave. It does not carry complex text or operations.
Loading feedback threshold: 2 seconds
When an operation requires a period of time to complete (generally more than 2 seconds), the system should provide immediate notification with clear loading status or progress bar to maintain communication with the user. If loading time is long, a cancel operation should be provided.
Popconfirm component: lightweight confirmation overlay near target
Popconfirm is used when an operation on a target element requires further user confirmation. A floating overlay appears near the target element to prompt the user. It provides a lighter-weight interaction compared to a full-screen centered modal dialog.
Message component: top-center auto-dismissing feedback
Message is a feedback overlay triggered by an operation, displayed at the top center and automatically dismisses. It is a lightweight notification method that does not interrupt user operations. The default display duration is 3 seconds.
Important failure notifications should use Modal, not Message
For important failure notifications, it is recommended to use a dialog box (Modal) form instead of a lightweight Message to avoid users missing the information. This is because Message has a short display duration (default 3 seconds).
Modal/Dialog: center-positioned feedback for important information
Dialog displays a feedback overlay positioned at the page center. Feedback content can be closed via confirm or cancel buttons. Users cannot perform any other operations while the dialog appears. It is used for important feedback. Avoid displaying unnecessary reminder dialogs on failure. Dialogs are a strong feedback mechanism and should only be used when conveying very important and actionable information.
Tabs component purpose and usage
Tabs categorize and display large amounts of information, allowing users to conveniently switch between tabs without page jumps for comparison browsing. This enables displaying more information within limited display area. Categories can be organized by business type, business status, or operation type and other parallel relationships. Category titles should be 2-6 Chinese characters in length.
Basic tabs style usage
Basic style tabs lead the entire page content and are used for primary functionality switching.
Card tabs style usage
Card style tabs are used for localized display on pages. The wrapped container design effectively isolates them from other content.
Capsule tabs style usage
Capsule style tabs are used for option switching within cards, frequently combined with other components to allow users to quickly switch between corresponding content. Generally used within small sections or paired with basic or card style tabs.
Vertical tabs style usage
Vertical style tabs are used for categories with many options. There is no limit to the number of categories, providing better extensibility.
Alert ErrorBoundary component
The Alert component provides an ErrorBoundary wrapper that makes error handling easier in React by catching rendering errors.
Alert component definition
The Alert component is fundamentally designed to convey page or module-level information that requires user attention.
Alert basic usage with content and title
Alert can display tip content alone, or it can be combined with a title for more complete information presentation.
Alert type variants with background and icon
Alert supports four types (success, information, warning, error) which are distinguished by background color and icon to help users quickly understand the alert type.
Alert interactive variants
Alert supports interactive behaviors including closing the alert, expanding or collapsing content, and executing other actions.
Breadcrumb with dropdown menu variant
The dropdown variant can carry content at the same level as the first-level breadcrumb, or can carry sub-level content of the breadcrumb, facilitating quick switching between sections.
Breadcrumb custom separator
Breadcrumb separators can use the greater-than symbol from mathematics as a custom separator style.
Breadcrumb component purpose
The Breadcrumb component's essential purpose is to help users understand their current position within the page and enable navigation upward in the hierarchy.
Breadcrumb basic usage
Breadcrumb is used when users need to understand the current page's position in the system hierarchy structure, or when they need to navigate upward. This is the most fundamental usage pattern.
Breadcrumb with dropdown menu variant
Breadcrumb can include dropdown menus where the menu content can contain items at the same level as the breadcrumb item or child-level items, enabling quick switching and navigation.
Breadcrumb with icon variant
Icons can be used in Breadcrumb to replace part of the text or be added before the text.
Breadcrumb custom separator
The separator in Breadcrumb can be customized, including using mathematical symbols such as the greater-than symbol (>).
GetRef utility type available since 5.13.0
GetRef is a utility type available since version 5.13.0 that gets the ref property definition of a component. It is useful for components that are not directly exposed or child components. Example: type SelectRefType = GetRef<typeof Select> returns BaseSelectRef.
GetProps utility type gets component props definition
GetProps is a utility type that extracts the props property definition of a component. It can be used with React components like Checkbox.Group to get their prop types. GetProps also supports extracting property definitions from React.Context types.
GetProps vs React.ComponentProps differences
GetProps differs from React.ComponentProps in three ways: GetProps does not support intrinsic element names (like 'button'), but it can extract value types directly from React.Context, and it can pass through existing props type objects. React.ComponentProps is the official React utility for getting props from intrinsic elements or React components.
GetProp utility type gets single property definition
GetProp extracts a single props or context property definition from a component. It has encapsulated NonNullable, so the returned type will not be empty. Example: type SelectOptionType = GetProp<SelectProps, 'options'>[number] gets the option type from Select. GetProp can also work with typeof Select directly.
GetProp with Return parameter gets function return types
GetProp supports a third parameter 'Return' to get the return type of function properties. Example: type OnChangeReturn = GetProp<Props, 'func', 'Return'> extracts the return type of a func property. This also works with properties that can be either a config object or a function, extracting the return type of the function variant.