Carousel visual hints for user guidance
In design, it is recommended to provide hints so that users maintain clear awareness of the number and direction of carousel items.
components/data-display
80 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
Tree component purpose and usage
Tree components display hierarchical relationships through progressive outlining, offering both efficiency and excellent visual visibility, making the overall information structure clear at a glance. Users can simultaneously browse and process multiple tree-level hierarchical content. Trees are suitable for any scenario requiring hierarchically organized information, such as folders, organizational structures, biological classifications, countries and regions, etc.
Timeline component purpose and usage
Timeline displays time flow information vertically, generally recording events in reverse chronological order and tracking what users have done currently and in the past. Each information entry uses time as the main axis, and content can include topics, types, related additional content, and more. It is suitable for displaying events, tasks, calendar annotations, and other related data.
Table empty cell representation
When a cell in a table contains no data, a dash (-) should be used to indicate no data is available.
Table line-breaking rules for specific columns
Time, status, and action columns in tables must keep words complete and not wrap across multiple lines.
Table component usage and best practices
Tables are recognized as one of the clearest and most efficient forms for presenting data. They commonly work with sorting, searching, filtering, pagination and other interface elements. Tables are suitable for information collection and display, data analysis and organization, and manipulation of structured data. Their simple structure and clear separation make information easier to compare, significantly improving user information reception efficiency and understanding.
Collapse component usage
Collapse panels group and organize information to guide users progressively in obtaining information, keeping the interface tidy while improving effective use of space. These components are used heavily in navigation and are suitable for managing lengthy, unstructured content.
Accordion mode for collapse panels
When collapsed content has low correlation, an accordion mode can be used for more space savings. Accordion is a special type of collapse panel that only allows one content area to be expanded at a time.
Card component usage and layout
Cards are containers for information with no excessive restrictions on content types. They centralize information, enhance block sense, and are easier to operate. Cards are usually arranged in grids or matrices to convey hierarchical relationships between them. They are suitable for displaying relatively lightweight and highly personalized information blocks.
Card layout maximum per row
Cards should typically be arranged according to grid layout, with a recommendation of no more than four cards per row.
Card content spacing and truncation
Within limited card space, attention should be paid to spacing between information. If information is too long, truncation should be applied, for example 'Ant Design applies to mid-platform…'
Carousel component usage
Carousel is a parallel display mode for a group of equivalent-level content, commonly used for image or card rotation. It can be triggered by users or rotated automatically by the system. It is suitable for showcase sections on official websites and product introduction pages.
Carousel item count recommendation
The number of carousel items should not be too many to avoid annoying users. Controlling the number between 3 to 5 items is optimal.
Mini pagination style
Mini pagination style is generally used within cards or floating layers.
Simple pagination style
Simple pagination style is generally used for cards or statistical table display with 10 pages or fewer.
Pagination component purpose
When large amounts of content need to be displayed, pagination loading is used. Pagination allows users to clearly understand how much content is available, how much has been browsed, and how much remains.
Standard pagination style
Standard pagination allows users to customize the number of rows per page to improve efficiency and flexibility in viewing and retrieving information. When pages exceed 5, quick page navigation functionality can be provided. Standard pagination is commonly paired with tables and cards.
Tooltip styling
Tooltip has high-contrast inverse surface with rgba(0,0,0,0.85) background, white text, 4 px border radius, and 6px 8px padding. It uses body-md typography. Tooltip is always positioned by the framework, never manually pinned.
Card component styling
Card is the workhorse container with white surface (#FFFFFF), 8 px radius, optional boxShadowCard elevation, internal padding of 24 px on all sides, and nested controls maintaining 16 px gaps.
Modal component styling
Modal uses the same surface and radius as Card (white background, 8 px radius) but uses the secondary shadow tier and is centered on a rgba(0, 0, 0, 0.45) mask. Body padding is 20 px top/bottom × 24 px left/right.
Tabs active tab styling
Tabs (active tab) displays primary (#1677FF) text and a 2 px primary underline. Inactive tabs use on-surface-variant (#595959) text. No background fill appears on tabs at any state.
Tag-blue variant styling
Tag-blue variant has #E6F4FF background with blue-7 (#0958D9) text, uses body-sm typography, 4 px radius, and 0 7px padding.
Tag component styling
Tag is a small categorical label with 4 px radius, 12 px font (body-sm typography), low-saturation pastel fills from the preset palette, and 0 7px padding. Never use a tag for a critical state; use Alert or Badge instead.
Alert component styling
Alert is a semantic feedback surface with success, warning, error, and info variants. They use pale semantic backgrounds (success: #F6FFED, warning: #FFFBE6, error: #FFF2F0, info: #E6F4FF) with normal text color (#1F1F1F), 8px rounded corners, and 8px 12px padding. Status is communicated by icon and tint, not by low-contrast colored body text.
Dropdown menu item hover styling
Dropdown menu (item hover) has surface-container (#FAFAFA) fill on hover with no text-color change. The hover affordance is enough.
Badge status dot styling
Badge status dot is a compact status indicator with 6px width and height and full border radius. Critical status may use error fill (#FF4D4F), but the dot is not a substitute for text in accessibility-critical flows.
Notification closable with onClose and closeIcon
Notification `closable` prop now encompasses `onClose` and `closeIcon` configuration.
Image cover placement support
Image `cover` prop now supports placement configuration.
Image removed default cover icon and text
Image component removed default cover icon and text; custom cover can still be configured using the `cover` prop.
Modal closable onClose prop
Modal `closable` prop now supports `onClose` callback that triggers for any type of close action.
Tag CheckableTagGroup sub component
Tag now supports CheckableTagGroup as a sub component.
Tag custom color variants support
Tag custom color now supports variants.
Tag disabled and href support
Tag now supports `disabled` and `href` props.
Timeline titleSpan config
Timeline now supports `titleSpan` prop to configure the size of the `title`.
Transfer actions prop
Transfer now includes `actions` prop that accepts a ReactNode array.
Drawer mask blur effect
Drawer mask now includes a blur effect.
Flex orientation layout
Flex component now supports `orientation` prop for controlling layout direction.
Splitter customize handle elements and style
Splitter now supports customizing handle elements and their styles.
Image preview.wheel prop
Image supports `preview.wheel` prop added in version 6.6.0 to control mouse wheel zoom in preview.
BorderBeam component with animation props
BorderBeam is a new component added in version 6.4.0 for animated border beam effects along container edges. It supports props including `count` (to display multiple evenly distributed beams), `duration` (to control beam loop duration), `lineWidth` (to control beam width), and `size` (to control beam size).
Badge title prop to control native tooltip
Badge supports `title` prop added in version 6.5.0 to allow removing the native tooltip.
Modal scrollLock prop
Modal supports `scrollLock` prop added in version 6.5.0 to control body scroll locking.
Watermark per-line font style support
Watermark supports per-line font style configuration for `content` added in version 6.5.0.
Image placeholder.progress prop
Image supports `placeholder.progress` prop added in version 6.4.0 to show loading progress indicator.
Image preview mask closable support
Image preview mask supports `closable` prop added in version 6.4.0.
Tag CheckableTagGroup per-option styling
Tag CheckableTagGroup supports per-option `className` and `style` added in version 6.4.0.
Alert variant prop
Alert supports `variant` prop added in version 6.4.0 to support filled and outlined styles, with ConfigProvider support.
Descriptions labelStyle contentStyle in bordered mode
Descriptions `labelStyle`, `contentStyle`, `styles.label`, and `styles.content` apply to matching cells in `bordered` mode, as fixed in version 6.5.0.
Image preview focus behavior on keyboard open
Image preview should lock focus when opened via keyboard, and restore focus to the trigger element after the preview closes. This was fixed in version 6.3.6 with PRs #57613 and #57614.
Image fetchPriority prop passed to img element
The Image component's fetchPriority prop is passed through to the underlying <img> element. This was fixed in version 6.3.4 with PR #57392.
Modal and Drawer mask blur effect disabled by default
Modal and Drawer mask blur effect is disabled by default in version 6.3.0. This was changed in PR #56781.
Drawer focusable configuration for focus behavior
Drawer adds focusable configuration to control focus behavior after opening, supporting focus locking within the container and focus returning after closing. This was added in version 6.2.0 with PR #56463.
QRCode marginSize property for QR code margin area
QRCode adds marginSize property for displaying QR code margin area. This was added in version 6.2.0 with PR #56569.
Alert semantic close button element
Alert adds semantic close button element. This was added in version 6.1.0 with PR #55815.
Drawer semantic close button element
Drawer adds semantic close button element. This was added in version 6.1.0 with PR #55816.
Drawer resizable boolean type setting
Drawer adds boolean type setting for resizable property. This was added in version 6.1.0 with PR #55861.
New Masonry component
Ant Design includes a new Masonry component for layout.
Pagination quick jumper accepts numeric values only
Pagination quick jumper now accepts numeric values only.
Watermark onRemove callback
Watermark now supports `onRemove` callback when manually deleted.
Drawer resizable drag capability
Drawer now includes `resizable` prop to support drag-to-resize capability.