# Spark Design System - Component API Reference

This skill provides the complete API reference for the Spark Design System (`@agentscope-ai/design`), which extends Ant Design (antd) with custom components and enhanced APIs.

## When to Use

- Building UI with `@agentscope-ai/design` components
- Looking up component props, types, or default values
- Checking which antd props are available on Spark components
- Understanding component relationships (e.g., Form + Form.Item)
- Finding the correct event handler signatures

## Component Index

### Data Entry
- [Button](#button) - Action triggers
- [Checkbox](#checkbox) - Multi-select checkboxes
- [DatePicker](#datepicker) - Date/time selection
- [Form](#form) - Form layout and validation
- [Input](#input) - Text input fields
- [InputNumber](#inputnumber) - Numeric input
- [MdEditor](#mdeditor) - Markdown editor
- [Radio](#radio) / [RadioButton](#radiobutton) - Single selection
- [Select](#select) - Dropdown selection
- [Slider](#slider) - Range slider
- [Switch](#switch) - Toggle switch
- [TimePicker](#timepicker) - Time selection
- [Upload](#upload) - File upload

### Data Display
- [Avatar](#avatar) - User avatar
- [Card](#card) - Content container
- [Carousel / CodeBlock](#codeblock) - Code display
- [CollapsePanel](#collapsepanel) / [Collapse](#collapse) - Expandable panels
- [Descriptions](#descriptions) - Key-value display
- [FileIcon](#fileicon) - File type icons
- [Image](#image) - Image display with preview
- [Statistic](#statistic) - Numeric display
- [Table](#table) - Data table
- [Tabs](#tabs) - Tabbed navigation
- [Tag](#tag) - Categorization labels
- [Tooltip](#tooltip) - Hover tips

### Feedback
- [Alert](#alert) / [AlertDialog](#alertdialog) - Alert messages
- [Drawer](#drawer) - Side panel
- [Message](#message) - Global messages
- [Modal](#modal) - Dialog windows
- [Notification](#notification) - Notification popups
- [Popconfirm](#popconfirm) - Confirmation popover
- [Popover](#popover) - Content popover
- [Progress](#progress) - Progress indicators
- [Result](#result) - Operation result
- [Skeleton](#skeleton) - Loading placeholder
- [Spinner](#spinner) - Loading spinner

### Navigation
- [Anchor](#anchor) - Anchor links
- [Breadcrumb](#breadcrumb) - Breadcrumb navigation
- [Dropdown](#dropdown) - Dropdown menu
- [FloatButton](#floatbutton) - Floating action button
- [Pagination](#pagination) - Page navigation
- [Steps](#steps) - Step indicator

### Other
- [Empty](#empty) - Empty state
- [IconButton](#iconbutton) - Icon-only button
- [Icon Library](#icon-library) - Available icons
- [Video](#video) - Video player
- [Audio](#audio) - Audio player

---

## Data Entry Components

### Upload

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| mouseEnterAutoPlay | | boolean | false |
| children | video | React.ReactNode | |

#### antd API

[API Reference](https://ant.design/components/upload-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| accept | | string | - |
| action | | string | (file) => Promise | - |
| beforeUpload | | (file, fileList) => boolean | Promise | - |
| customRequest | | function | - |
| data | | object | (file) => object | Promise | - |
| defaultFileList | | object[] | - |
| directory | | boolean | false |
| disabled | | boolean | false |
| fileList | | UploadFile[] | - |
| headers | IE10 | object | - |
| iconRender | icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |
| isImageUrl | | (file: UploadFile) => boolean | |
| itemRender | | (originNode: ReactElement, file: UploadFile, fileList: object[], actions: { download, preview, remove }) => React.ReactNode | - | 4.16.0 |
| listType | | string | text | picture-circle |
| maxCount | | number | - | 4.10.0 |
| method | | string | post |
| multiple | | boolean | false |
| name | | string | file |
| openFileDialogOnClick | | boolean | true |
| pastable | | boolean | false | 5.25.0 |
| previewFile | | (file: File | Blob) => Promise | - |
| progress | | ProgressProps | { strokeWidth: 2, showInfo: false } | 4.3.0 |
| showUploadList | | boolean | ShowUploadListInterface | true |
| withCredentials | cookie | boolean | false |
| onChange | | function | - |
| onDrop | | (event: React.DragEvent) => void | - | 4.16.0 |
| onDownload | | function(file): void | - |
| onPreview | | function(file) | - |
| onRemove | | function(file): boolean | Promise | - |

#### UploadFile

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| crossOrigin | CORS | 'anonymous' | - | 4.20.0 |
| name | | string | - |
| percent | | number | - |
| status | | 'uploading' | 'done' | 'error' | 'removed' | - |
| thumbUrl | | string | - |
| uid | | string | - |
| url | | string | - |

#### onChange

```jsx
{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}
```

1. `file` object:
```jsx
{
  uid: 'uid',
  name: 'xx.png',
  status: 'done' | 'uploading' | 'error' | 'removed',
  response: '{"status": "success"}',
  linkProps: '{"download": "image"}',
}
```
2. `fileList` - current file list
3. `event` - upload progress event

---

### Input

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| shape | | 'default' | 'round' | default |

#### antd API

[API Reference](https://ant.design/components/input-cn/#api)
[Common Props](/docs/react/common-props)

##### Input

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| addonAfter | | ReactNode | - |
| addonBefore | | ReactNode | - |
| allowClear | | boolean | { clearIcon: ReactNode } | - |
| classNames | | Record | - | 5.4.0 |
| count | | CountConfig | - | 5.10.0 |
| defaultValue | | string | - |
| disabled | | boolean | false |
| id | | string | - |
| maxLength | | number | - |
| prefix | | ReactNode | - |
| showCount | | boolean | { formatter } | false | 4.18.0 |
| status | | 'error' | 'warning' | - | 4.19.0 |
| styles | | Record | - | 5.4.0 |
| size | | 'large' | 'middle' | 'small' | - |
| suffix | | ReactNode | - |
| type | | string | text |
| value | | string | - |
| variant | | 'outlined' | 'borderless' | 'filled' | outlined | 5.13.0 |
| onChange | | function(e) | - |
| onPressEnter | | function(e) | - |
| onClear | | () => void | - | 5.20.0 |

##### CountConfig

```tsx
interface CountConfig {
  max?: number;
  strategy?: (value: string) => number;
  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
  exceedFormatter?: (value: string, config: { max: number }) => string;
}
```

##### Input.TextArea

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| autoSize | | boolean | { minRows: number, maxRows: number } | false |
| classNames | | Record | - | 5.4.0 |
| styles | | Record | - | 5.4.0 |

##### Input.Search

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| enterButton | | ReactNode | false |
| loading | | boolean | false |
| onSearch | | function(value, event, { source }) | - |

##### Input.Password

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| iconRender | | (visible) => ReactNode | - | 4.3.0 |
| visibilityToggle | | boolean | { visible, onVisibleChange } | true |

##### Input.OTP (5.16.0+)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| defaultValue | | string | - |
| disabled | | boolean | false |
| formatter | | (value: string) => string | - |
| separator | | ReactNode | ((i: number) => ReactNode) | - | 5.24.0 |
| mask | | boolean | string | false | 5.17.0 |
| length | | number | 6 |
| status | | 'error' | 'warning' | - |
| size | | 'small' | 'middle' | 'large' | middle |
| variant | | 'outlined' | 'borderless' | 'filled' | 'underlined' | outlined |
| value | | string | - |
| onChange | | (value: string) => void | - |
| onInput | | (value: string[]) => void | - | 5.22.0 |

##### Input Methods

| Method | Description |
|--------|-------------|
| blur() | Remove focus |
| focus(option?) | Set focus. option: { preventScroll?, cursor?: 'start' | 'end' | 'all' } |

---

### InputNumber

#### antd API

[API Reference](https://ant.design/components/input-number-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| addonAfter | | ReactNode | - | 4.17.0 |
| addonBefore | | ReactNode | - | 4.17.0 |
| autoFocus | | boolean | false |
| changeOnBlur | | boolean | true | 5.11.0 |
| changeOnWheel | | boolean | - | 5.14.0 |
| controls | | boolean | { upIcon?, downIcon? } | - | 4.19.0 |
| decimalSeparator | | string | - |
| placeholder | | string | - |
| defaultValue | | number | - |
| disabled | | boolean | false |
| formatter | | function(value, info): string | - | info: 4.17.0 |
| keyboard | | boolean | true | 4.12.0 |
| max | | number | Infinity |
| min | | number | -Infinity |
| parser | | function(string): number | - |
| precision | | number | - |
| readOnly | | boolean | false |
| status | | 'error' | 'warning' | - | 4.19.0 |
| prefix | | ReactNode | - | 4.17.0 |
| suffix | | ReactNode | - | 5.20.0 |
| size | | 'large' | 'middle' | 'small' | - |
| step | | number | string | 1 |
| stringMode | | boolean | false | 4.13.0 |
| value | | number | - |
| variant | | 'outlined' | 'borderless' | 'filled' | outlined | 5.13.0 |
| onChange | | function(value: number | string | null) | - |
| onPressEnter | | function(e) | - |
| onStep | | (value, info: { offset, type }) => void | - | 4.7.0 |

##### Ref

| Method | Description | Version |
|--------|-------------|---------|
| blur() | | - |
| focus(option?) | option: { preventScroll?, cursor? } | cursor: 5.22.0 |
| nativeElement | DOM element | 5.17.3 |

---

### Select

#### antd API

[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| allowClear | | boolean | { clearIcon?: ReactNode } | false | 5.8.0 |
| autoClearSearchValue | | boolean | true |
| autoFocus | | boolean | false |
| classNames | | Record | - | 5.25.0 |
| defaultActiveFirstOption | | boolean | true |
| defaultOpen | | boolean | - |
| defaultValue | | string | string[] | LabeledValue | - |
| disabled | | boolean | false |
| popupMatchSelectWidth | | boolean | number | true | 5.5.0 |
| popupRender | | (originNode: ReactNode) => ReactNode | - |
| fieldNames | | object | { label, value, options } | 4.17.0 |
| filterOption | | boolean | function(inputValue, option) | true |
| filterSort | | (optionA, optionB, info) => number | - |
| getPopupContainer | | function(triggerNode) | () => document.body |
| labelInValue | | boolean | false |
| listHeight | | number | 256 |
| loading | | boolean | false |
| maxCount | | number | - | 5.13.0 |
| maxTagCount | | number | 'responsive' | - | responsive: 4.10 |
| maxTagPlaceholder | | ReactNode | function(omittedValues) | - |
| maxTagTextLength | | number | - |
| menuItemSelectedIcon | | ReactNode | - |
| mode | | 'multiple' | 'tags' | - |
| notFoundContent | | ReactNode | Not Found |
| open | | boolean | - |
| optionFilterProp | | string | value |
| optionLabelProp | | string | children |
| options | | { label, value }[] | - |
| optionRender | | (option, info) => React.ReactNode | - | 5.11.0 |
| placeholder | | string | - |
| placement | | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | bottomLeft |
| prefix | | ReactNode | - | 5.22.0 |
| removeIcon | | ReactNode | - |
| searchValue | | string | - |
| showSearch | | boolean | false (single) / true (multiple) |
| size | | 'large' | 'middle' | 'small' | middle |
| status | | 'error' | 'warning' | - | 4.19.0 |
| suffixIcon | | ReactNode | |
| styles | | Record | - | 5.25.0 |
| tagRender | | (props) => ReactNode | - |
| labelRender | | (props: LabelInValueType) => ReactNode | - | 5.15.0 |
| tokenSeparators | | string[] | - |
| value | | string | string[] | LabeledValue | - |
| variant | | 'outlined' | 'borderless' | 'filled' | outlined | 5.13.0 |
| virtual | | boolean | true | 4.1.0 |
| onBlur | | function | - |
| onChange | | function(value, option) | - |
| onClear | | function | - | 4.6.0 |
| onDeselect | | function(value) | - |
| onOpenChange | | (open: boolean) => void | - |
| onFocus | | (event: FocusEvent) => void | - |
| onInputKeyDown | | (event: KeyboardEvent) => void | - |
| onPopupScroll | | (event: UIEvent) => void | - |
| onSearch | | function(value: string) | - |
| onSelect | | function(value, option) | - |

##### Select Methods

| Method | Description |
|--------|-------------|
| blur() | Remove focus |
| focus() | Set focus |

##### Option props

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| className | | string | - |
| disabled | | boolean | false |
| title | | string | - |
| value | | string | number | - |

##### OptGroup props

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| key | | string | - |
| label | | React.ReactNode | - |
| className | | string | - |
| title | | string | - |

---

### Checkbox

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| description | | string | |
| descriptionClassName | | string | |
| descriptionStyle | | React.CSSProperties | |

#### antd API

[API Reference](https://ant.design/components/checkbox-cn/#api)
[Common Props](/docs/react/common-props)

##### Checkbox

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| autoFocus | | boolean | false |
| checked | | boolean | false |
| defaultChecked | | boolean | false |
| disabled | | boolean | false |
| indeterminate | | boolean | false |
| onChange | | (e: CheckboxChangeEvent) => void | - |
| onBlur | | function() | - |
| onFocus | | function() | - |

##### Checkbox.Group

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| defaultValue | | (string | number)[] | [] |
| disabled | | boolean | false |
| name | | string | - |
| options | | string[] | number[] | Option[] | [] |
| value | | (string | number | boolean)[] | [] |
| title | | string | - |
| className | | string | - | 5.25.0 |
| style | | React.CSSProperties | - |
| onChange | | (checkedValue: T[]) => void | - |

```typescript
interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}
```

##### Checkbox Ref

| Method | Description | Version |
|--------|-------------|---------|
| blur() | Remove focus | |
| focus() | Set focus | |
| nativeElement | Checkbox DOM | 5.17.3 |

---

### Radio

#### antd API

[API Reference](https://ant.design/components/radio-cn/#api)
[Common Props](/docs/react/common-props)

##### Radio / Radio.Button

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| autoFocus | | boolean | false |
| checked | | boolean | false |
| defaultChecked | | boolean | false |
| disabled | | boolean | false |
| value | | any | - |

##### Radio.Group

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| buttonStyle | | 'outline' | 'solid' | outline |
| defaultValue | | any | - |
| disabled | | boolean | false |
| name | | string | - |
| options | | string[] | number[] | Array<CheckboxOptionType> | - |
| optionType | | 'default' | 'button' | default | 4.4.0 |
| size | | 'large' | 'middle' | 'small' | - |
| value | | any | - |
| block | | boolean | false | 5.21.0 |
| onChange | | function(e: Event) | - |

##### CheckboxOptionType

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| label | | string | - | 4.4.0 |
| value | | string | - | 4.4.0 |
| style | | React.CSSProperties | - | 4.4.0 |
| className | | string | - | 5.25.0 |
| disabled | | boolean | false | 4.4.0 |
| title | | string | - | 4.4.0 |
| id | | string | - | 4.4.0 |
| onChange | | (e: CheckboxChangeEvent) => void | - | 4.4.0 |
| required | | boolean | false | 4.4.0 |

##### Radio Methods

| Method | Description |
|--------|-------------|
| blur() | Remove focus |
| focus() | Set focus |

---

### RadioButton

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| bordered | | boolean | false |
| ghost | | boolean | true |
| gap | | number | 12 (px) |

Extends [Radio](#radio) antd API.

---

### Switch

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| label | | ReactNode | |

#### antd API

[API Reference](https://ant.design/components/switch-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| autoFocus | | boolean | false |
| checked | | boolean | false |
| checkedChildren | | ReactNode | - |
| className | | string | - |
| defaultChecked | | boolean | false |
| defaultValue | | boolean | - | 5.12.0 |
| disabled | | boolean | false |
| loading | | boolean | false |
| size | | 'default' | 'small' | default |
| unCheckedChildren | | ReactNode | - |
| value | | boolean | - | 5.12.0 |
| onChange | | function(checked: boolean, event: Event) | - |
| onClick | | function(checked: boolean, event: Event) | - |

| Method | Description |
|--------|-------------|
| blur() | Remove focus |
| focus() | Set focus |

---

### Slider

#### antd API

[API Reference](https://ant.design/components/slider-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| autoFocus | | boolean | false |
| classNames | | Record | - | 5.10.0 |
| defaultValue | | number | [number, number] | 0 | [0, 0] |
| disabled | | boolean | false |
| keyboard | | boolean | true | 5.2.0+ |
| dots | | boolean | false |
| included | | boolean | true |
| marks | | object | - |
| max | | number | 100 |
| min | | number | 0 |
| range | | boolean | RangeConfig | false |
| reverse | | boolean | false |
| step | | number | null | 1 |
| styles | | Record | - | 5.10.0 |
| tooltip | | TooltipConfig | - | 4.23.0 |
| value | | number | [number, number] | - |
| vertical | | boolean | false |
| onChangeComplete | | (value) => void | - |
| onChange | | (value) => void | - |

##### range

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| draggableTrack | | boolean | false |
| editable | | boolean | false | 5.20.0 |
| minCount | | number | 0 | 5.20.0 |
| maxCount | | number | - | 5.20.0 |

##### tooltip

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| autoAdjustOverflow | | boolean | true | 5.8.0 |
| open | | boolean | - | 4.23.0 |
| placement | | string | - | 4.23.0 |
| getPopupContainer | | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
| formatter | | value => ReactNode | null | IDENTITY | 4.23.0 |

| Method | Description |
|--------|-------------|
| blur() | Remove focus |
| focus() | Set focus |

---

### DatePicker

#### antd API

[API Reference](https://ant.design/components/date-picker-cn/#api)
[Common Props](/docs/react/common-props)

Locale setup:
```jsx
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

<ConfigProvider locale={locale}>
  <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
</ConfigProvider>;
```

##### Common API (shared by DatePicker and RangePicker)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| allowClear | | boolean | { clearIcon?: ReactNode } | true | 5.8.0 |
| autoFocus | | boolean | false |
| className | | string | - |
| cellRender | | (current, info) => React.ReactNode | - | 5.4.0 |
| components | | Record | - | 5.14.0 |
| defaultOpen | | boolean | - |
| disabled | | boolean | false |
| disabledDate | | (currentDate: dayjs, info) => boolean | - |
| format | | FormatType | - |
| order | | boolean | true | 5.14.0 |
| preserveInvalidOnBlur | | boolean | false | 5.14.0 |
| getPopupContainer | | function(trigger) | - |
| inputReadOnly | | boolean | false |
| locale | | object | |
| minDate | | dayjs | - | 5.14.0 |
| maxDate | | dayjs | - | 5.14.0 |
| mode | | 'time' | 'date' | 'month' | 'year' | 'decade' | - |
| needConfirm | | boolean | - | 5.14.0 |
| nextIcon | | ReactNode | - | 4.17.0 |
| open | | boolean | - |
| panelRender | | (panelNode) => ReactNode | - | 4.5.0 |
| picker | | 'date' | 'week' | 'month' | 'quarter' | 'year' | date |
| placeholder | | string | [string, string] | - |
| placement | | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | bottomLeft |
| prefix | | ReactNode | - | 5.22.0 |
| prevIcon | | ReactNode | - | 4.17.0 |
| presets | | { label: React.ReactNode, value: Dayjs | (() => Dayjs) }[] | - |
| size | | 'large' | 'middle' | 'small' | - |
| status | | 'error' | 'warning' | - | 4.19.0 |
| style | | CSSProperties | {} |
| suffixIcon | | ReactNode | - |
| superNextIcon | | ReactNode | - | 4.17.0 |
| superPrevIcon | | ReactNode | - | 4.17.0 |
| variant | | 'outlined' | 'borderless' | 'filled' | outlined | 5.13.0 |
| onOpenChange | | function(open) | - |
| onPanelChange | | function(value, mode) | - |

| Method | Description |
|--------|-------------|
| blur() | Remove focus |
| focus() | Set focus |

##### DatePicker (single)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| defaultPickerValue | | dayjs | - | 5.14.0 |
| defaultValue | | dayjs | - |
| disabledTime | | function(date) | - |
| format | | FormatType | YYYY-MM-DD |
| multiple | | boolean | false | 5.14.0 |
| pickerValue | | dayjs | - | 5.14.0 |
| renderExtraFooter | | (mode) => React.ReactNode | - |
| showNow | | boolean | - |
| showTime | | Object | boolean | |
| showTime.defaultValue | | dayjs | dayjs() |
| showWeek | | boolean | false | 5.14.0 |
| value | | dayjs | - |
| onChange | | function(date: dayjs, dateString: string) | - |
| onOk | | function() | - |
| onPanelChange | | function(value, mode) | - |

##### DatePicker[picker=year]

| Property | Type | Default | Version |
|----------|------|---------|---------|
| defaultValue | dayjs | - |
| format | FormatType | YYYY |
| multiple | boolean | false | 5.14.0 |
| renderExtraFooter | () => React.ReactNode | - |
| value | dayjs | - |
| onChange | function(date, dateString) | - |

##### DatePicker[picker=quarter] (4.1.0+)

| Property | Type | Default | Version |
|----------|------|---------|---------|
| defaultValue | dayjs | - |
| format | FormatType | YYYY-\QQ |
| multiple | boolean | false | 5.14.0 |
| renderExtraFooter | () => React.ReactNode | - |
| value | dayjs | - |
| onChange | function(date, dateString) | - |

##### DatePicker[picker=month]

| Property | Type | Default | Version |
|----------|------|---------|---------|
| defaultValue | dayjs | - |
| format | FormatType | YYYY-MM |
| multiple | boolean | false | 5.14.0 |
| renderExtraFooter | () => React.ReactNode | - |
| value | dayjs | - |
| onChange | function(date, dateString) | - |

##### DatePicker[picker=week]

| Property | Type | Default | Version |
|----------|------|---------|---------|
| defaultValue | dayjs | - |
| format | FormatType | YYYY-wo |
| multiple | boolean | false | 5.14.0 |
| renderExtraFooter | (mode) => React.ReactNode | - |
| value | dayjs | - |
| onChange | function(date, dateString) | - |
| showWeek | boolean | true | 5.14.0 |

##### RangePicker

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| allowEmpty | | [boolean, boolean] | [false, false] |
| cellRender | | (current, info) => React.ReactNode | - | 5.4.0 |
| defaultPickerValue | | [dayjs, dayjs] | - | 5.14.0 |
| defaultValue | | [dayjs, dayjs] | - |
| disabled | | [boolean, boolean] | - |
| disabledTime | | function(date, partial) | - |
| format | | FormatType | YYYY-MM-DD HH:mm:ss |
| id | | { start?: string, end?: string } | - | 5.14.0 |
| pickerValue | | [dayjs, dayjs] | - | 5.14.0 |
| presets | | { label: React.ReactNode, value: (Dayjs | (() => Dayjs))[] }[] | - |
| renderExtraFooter | | () => React.ReactNode | - |
| separator | | React.ReactNode | |
| showTime | | Object | boolean | |
| showTime.defaultValue | | [dayjs, dayjs] | [dayjs(), dayjs()] |
| value | | [dayjs, dayjs] | - |
| onCalendarChange | | function(dates, dateStrings, info) | - |
| onChange | | function(dates, dateStrings) | - |
| onFocus | | function(event, { range }) | - |
| onBlur | | function(event, { range }) | - |

##### FormatType

```typescript
import type { Dayjs } from 'dayjs';
type Generic = string;
type GenericFn = (value: Dayjs) => string;
export type FormatType =
  | Generic
  | GenericFn
  | Array<Generic | GenericFn>
  | { format: string; type?: 'mask' };
```

---

### TimePicker

#### antd API

[API Reference](https://ant.design/components/time-picker-cn/#api)
[Common Props](/docs/react/common-props)

```jsx
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
```

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| allowClear | | boolean | { clearIcon?: ReactNode } | true | 5.8.0 |
| autoFocus | | boolean | false |
| cellRender | | (current, info) => React.ReactNode | - | 5.4.0 |
| changeOnScroll | | boolean | false | 5.14.0 |
| className | | string | - |
| defaultValue | | dayjs | - |
| disabled | | boolean | false |
| disabledTime | | DisabledTime | - | 4.19.0 |
| format | | string | HH:mm:ss |
| getPopupContainer | | function(trigger) | - |
| hideDisabledOptions | | boolean | false |
| hourStep | | number | 1 |
| inputReadOnly | | boolean | false |
| minuteStep | | number | 1 |
| needConfirm | | boolean | - | 5.14.0 |
| open | | boolean | false |
| placeholder | | string | [string, string] | |
| placement | | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | bottomLeft |
| popupClassName | | string | - |
| popupStyle | | object | - |
| prefix | | ReactNode | - | 5.22.0 |
| renderExtraFooter | | () => ReactNode | - |
| secondStep | | number | 1 |
| showNow | | boolean | - | 4.4.0 |
| size | | 'large' | 'middle' | 'small' | - |
| status | | 'error' | 'warning' | - | 4.19.0 |
| suffixIcon | | ReactNode | - |
| use12Hours | | boolean | false |
| value | | dayjs | - |
| variant | | 'outlined' | 'borderless' | 'filled' | outlined | 5.13.0 |
| onCalendarChange | | function(dates, dateStrings, info) | - |
| onChange | | function(time: dayjs, timeString: string) | - |
| onOpenChange | | (open: boolean) => void | - |

##### DisabledTime

```typescript
type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
  disabledMilliseconds?: (
    selectedHour: number,
    selectedMinute: number,
    selectedSecond: number,
  ) => number[];
};
```

`disabledMilliseconds` available since `5.14.0`.

| Method | Description |
|--------|-------------|
| blur() | Remove focus |
| focus() | Set focus |

##### RangePicker

See DatePicker [RangePicker](/components/date-picker-cn#rangepicker).

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| disabledTime | | RangeDisabledTime | - | 4.19.0 |
| order | | boolean | true | 4.1.0 |

```typescript
type RangeDisabledTime = (
  now: Dayjs,
  type: 'start' | 'end',
) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};
```

---

### MdEditor

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| maxLength | | number | |
| value | | string | |
| className | | string | |
| onChange | | (value: string) => void | |
| variables | | Array | |
| onCreate | | () => void | |
| createBtnText | | string | |
| tipsText | | string | React.ReactNode | false | |

---

### Form

#### antd API

[API Reference](https://ant.design/components/form-cn/#api)
[Common Props](/docs/react/common-props)

##### Form

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| colon | | boolean | true |
| disabled | | boolean | false | 4.21.0 |
| component | | ComponentType | false | form |
| fields | | FieldData[] | - |
| form | | FormInstance | - |
| feedbackIcons | | FeedbackIcons | - | 5.9.0 |
| initialValues | | object | - |
| labelAlign | | 'left' | 'right' | right |
| labelWrap | | boolean | false | 4.18.0 |
| labelCol | | ColProps | - |
| layout | | 'horizontal' | 'vertical' | 'inline' | horizontal |
| name | | string | - |
| preserve | | boolean | true | 4.4.0 |
| requiredMark | | boolean | 'optional' | true |
| scrollToFirstError | | boolean | ScrollOptions | false | focus: 5.24.0 |
| size | | 'small' | 'middle' | 'large' | - |
| validateMessages | | ValidateMessages | - |
| validateTrigger | | string | string[] | onChange | 4.3.0 |
| variant | | 'outlined' | 'borderless' | 'filled' | outlined | 5.13.0 |
| wrapperCol | | ColProps | - |
| onFieldsChange | | function(changedFields, allFields) | - |
| onFinish | | function(values) | - |
| onFinishFailed | | function({ values, errorFields, outOfDate }) | - |
| onValuesChange | | function(changedValues, allValues) | - |
| clearOnDestroy | | boolean | false | 5.18.0 |

##### validateMessages

```jsx
const validateMessages = {
  required: "'${name}' is required",
};
<Form validateMessages={validateMessages} />;

// Or via ConfigProvider
<ConfigProvider form={{ validateMessages }}>
  <Form />
</ConfigProvider>;
```

##### Form.Item

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| colon | | boolean | true |
| dependencies | | NamePath[] | - |
| extra | | ReactNode | - |
| getValueFromEvent | | (..args: any[]) => any | - |
| getValueProps | | (value: any) => Record | - | 4.2.0 |
| hasFeedback | | boolean | { icons: FeedbackIcons } | false | icons: 5.9.0 |
| help | | ReactNode | - |
| hidden | | boolean | false | 4.4.0 |
| htmlFor | | string | - |
| initialValue | | string | - | 4.2.0 |
| label | | ReactNode | - | null: 5.22.0 |
| labelAlign | | 'left' | 'right' | right |
| labelCol | | ColProps | - |
| messageVariables | | Record<string, string> | - | 4.7.0 |
| name | | NamePath | - |
| normalize | | (value, prevValue, prevValues) => any | - |
| noStyle | | boolean | false |
| preserve | | boolean | true | 4.4.0 |
| required | | boolean | false |
| rules | | Rule[] | - |
| shouldUpdate | | boolean | (prevValue, curValue) => boolean | false |
| tooltip | | ReactNode | TooltipProps | - | 4.7.0 |
| trigger | | string | onChange |
| validateFirst | | boolean | 'parallel' | false |
| validateDebounce | | number | - | 5.9.0 |
| validateStatus | | 'success' | 'warning' | 'error' | 'validating' | - |
| validateTrigger | | string | string[] | onChange |
| valuePropName | | string | value |
| wrapperCol | | ColProps | - |
| layout | | 'horizontal' | 'vertical' | - | 5.18.0 |

##### Form.List

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| children | | (fields, operation, meta) => React.ReactNode | - |
| initialValue | | any[] | - | 4.9.0 |
| name | | NamePath | - |
| rules | | { validator, message }[] | - | 4.7.0 |

```tsx
<Form.List>
  {(fields) =>
    fields.map((field) => (
      <Form.Item {...field}>
        <Input />
      </Form.Item>
    ))
  }
</Form.List>
```

##### Form.List operation

| Method | Description | Version |
|--------|-------------|---------|
| add(defaultValue?, insertIndex?) | Add field | insertIndex: 4.6.0 |
| move(from, to) | Move field | - |
| remove(index | index[]) | Remove field(s) | number[]: 4.5.0 |

##### Form.ErrorList

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| errors | | ReactNode[] | - |

##### Form.Provider

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| onFormChange | | function(formName, info) | - |
| onFormFinish | | function(formName, info) | - |

##### FormInstance

| Method | Description | Version |
|--------|-------------|---------|
| getFieldError(name) | Get field errors | |
| getFieldInstance(name) | Get field instance | 4.4.0 |
| getFieldsError(nameList?) | Get fields errors | |
| getFieldsValue(nameList?, filter?) | Get fields values | |
| getFieldValue(name) | Get field value | |
| isFieldsTouched(nameList?, allTouched?) | Check fields touched | |
| isFieldTouched(name) | Check field touched | |
| isFieldValidating(name) | Check field validating | |
| resetFields(fields?) | Reset fields | |
| scrollToField(name, options?) | Scroll to field | focus: 5.24.0 |
| setFields(fields) | Set fields | |
| setFieldValue(name, value) | Set field value | 4.22.0 |
| setFieldsValue(values) | Set fields values | |
| submit() | Submit form | |
| validateFields(nameList?, config?) | Validate fields | |

##### validateFields config

```tsx
export interface ValidateConfig {
  validateOnly?: boolean; // 5.5.0 - UI only
  recursive?: boolean;    // 5.9.0
  dirty?: boolean;        // 5.11.0
}
```

##### Hooks

- `Form.useForm()` - returns `[FormInstance]`
- `Form.useFormInstance()` - returns `FormInstance` (4.20.0+)
- `Form.useWatch(namePath, formInstance?)` - watch field value
- `Form.Item.useStatus()` - returns `{ status, errors, warnings }`

##### NamePath

```typescript
type NamePath = string | number | (string | number)[];
```

##### Rule

```tsx
type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
```

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| defaultField | | Rule | |
| enum | | any[] | |
| fields | | Record<string, Rule> | |
| len | | number | |
| max | | number | |
| message | | string | ReactElement | |
| min | | number | |
| pattern | | RegExp | |
| required | | boolean | |
| transform | | (value) => any | |
| type | | string | |
| validateTrigger | | string | string[] | |
| validator | | (rule, value) => Promise | |
| warningOnly | | boolean | 4.17.0 |
| whitespace | | boolean | |

---

## Data Display Components

### Table

#### antd API

[API Reference](https://ant.design/components/table-cn/#api)
[Common Props](/docs/react/common-props)

##### Table

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| bordered | | boolean | false |
| columns | | ColumnsType | - |
| components | | TableComponents | - |
| dataSource | | object[] | - |
| expandable | | ExpandableConfig | - |
| footer | | function(currentPageData) | - |
| getPopupContainer | | (triggerNode) => HTMLElement | () => TableHtmlElement |
| loading | | boolean | SpinProps | false |
| locale | | object | |
| pagination | | object | false | - |
| rowClassName | | function(record, index): string | - |
| rowKey | | string | function(record): string | key |
| rowSelection | | object | - |
| rowHoverable | | boolean | true | 5.16.0 |
| scroll | | ScrollConfig | - |
| showHeader | | boolean | true |
| showSorterTooltip | | boolean | TooltipProps | { target: 'full-header' } | 5.16.0 |
| size | | 'large' | 'middle' | 'small' | large |
| sortDirections | | Array<'ascend' | 'descend'> | ['ascend', 'descend'] |
| sticky | | boolean | { offsetHeader?, getContainer? } | - | 4.6.0 |
| summary | | (currentData) => ReactNode | - |
| tableLayout | | 'auto' | 'fixed' | - |
| title | | function(currentPageData) | - |
| virtual | | boolean | - | 5.9.0 |
| onChange | | function(pagination, filters, sorter, extra) | - |
| onHeaderRow | | function(columns, index) | - |
| onRow | | function(record, index) | - |
| onScroll | | function(event) | - | 5.16.0 |

##### Table ref

| Property | Description | Type | Version |
|----------|-------------|------|---------|
| nativeElement | div DOM | HTMLDivElement | 5.11.0 |
| scrollTo | | (config: { index?, key?, top? }) => void | 5.11.0 |

##### onRow usage

```jsx
<Table
  onRow={(record) => ({
    onClick: (event) => {},
    onDoubleClick: (event) => {},
    onContextMenu: (event) => {},
    onMouseEnter: (event) => {},
    onMouseLeave: (event) => {},
  })}
  onHeaderRow={(columns, index) => ({
    onClick: () => {},
  })}
/>
```

##### Column

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| align | | 'left' | 'right' | 'center' | left |
| className | | string | - |
| colSpan | | number | - |
| dataIndex | | string | string[] | - |
| defaultFilteredValue | | string[] | - |
| filterResetToDefaultFilteredValue | | boolean | false |
| defaultSortOrder | | 'ascend' | 'descend' | - |
| ellipsis | | boolean | { showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | | ReactNode | (props) => ReactNode | - |
| filtered | | boolean | false |
| filteredValue | | string[] | - |
| filterIcon | | ReactNode | (filtered: boolean) => ReactNode | false |
| filterOnClose | | boolean | true | 5.15.0 |
| filterMultiple | | boolean | true |
| filterMode | | 'menu' | 'tree' | 'menu' | 4.17.0 |
| filterSearch | | boolean | function(input, record): boolean | false |
| filters | | object[] | - |
| filterDropdownProps | | DropdownProps | - | 5.22.0 |
| fixed | | boolean | 'left' | 'right' | false |
| key | | string | - |
| render | | function(value, record, index) | - |
| responsive | | Breakpoint[] | - | 4.2.0 |
| rowScope | | 'row' | 'rowgroup' | - | 5.1.0 |
| shouldCellUpdate | | (record, prevRecord) => boolean | - | 4.3.0 |
| showSorterTooltip | | boolean | TooltipProps | { target: 'full-header' } | 5.16.0 |
| sortDirections | | Array<'ascend' | 'descend'> | ['ascend', 'descend'] |
| sorter | | function | boolean | { compare, multiple } | - |
| sortOrder | | 'ascend' | 'descend' | null | - |
| sortIcon | | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
| title | | ReactNode | ({ sortOrder, sortColumn, filters }) => ReactNode | - |
| width | | string | number | - |
| minWidth | | number | - | 5.21.0 |
| hidden | | boolean | false | 5.13.0 |
| onCell | | function(record, rowIndex) | - |
| onFilter | | function | - |
| onHeaderCell | | function(column) | - |

##### ColumnGroup

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| title | | ReactNode | - |

##### pagination

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| position | | Array<'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'> | ['bottomRight'] |

See also [Pagination](#pagination) component.

##### expandable

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| childrenColumnName | | string | children |
| columnTitle | | ReactNode | - | 4.23.0 |
| columnWidth | | string | number | - |
| defaultExpandAllRows | | boolean | false |
| defaultExpandedRowKeys | | string[] | - |
| expandedRowClassName | | string | (record, index, indent) => string | - | string: 5.22.0 |
| expandedRowKeys | | string[] | - |
| expandedRowRender | | function(record, index, indent, expanded): ReactNode | - |
| expandIcon | | function(props): ReactNode | - |
| expandRowByClick | | boolean | false |
| fixed | | boolean | 'left' | 'right' | false | 4.16.0 |
| indentSize | | number (px) | 15 |
| rowExpandable | | (record) => boolean | - |
| showExpandColumn | | boolean | true | 4.18.0 |
| onExpand | | function(expanded, record) | - |
| onExpandedRowsChange | | function(expandedRows) | - |

##### rowSelection

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| align | | 'left' | 'center' | 'right' | left | 5.25.0 |
| checkStrictly | | boolean | true | 4.4.0 |
| columnTitle | | ReactNode | (originalNode) => ReactNode | - |
| columnWidth | | string | number | 32px |
| fixed | | boolean | - |
| getCheckboxProps | | function(record) | - |
| hideSelectAll | | boolean | false | 4.3.0 |
| preserveSelectedRowKeys | | boolean | - | 4.4.0 |
| renderCell | | function(checked, record, index, originNode) | - | 4.1.0 |
| selectedRowKeys | | string[] | number[] | [] |
| defaultSelectedRowKeys | | string[] | number[] | [] |
| selections | | object[] | boolean | true |
| type | | 'checkbox' | 'radio' | checkbox |
| onCell | | function(record, rowIndex) | - | 5.5.0 |
| onChange | | function(selectedRowKeys, selectedRows, info) | - |
| onSelect | | function(record, selected, selectedRows, nativeEvent) | - |
| onSelectAll | | function(selected, selectedRows, changeRows) | - |
| onSelectInvert | | function(selectedRowKeys) | - |
| onSelectNone | | function() | - |
| onSelectMultiple | | function(selected, selectedRows, changeRows) | - |

##### scroll

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| scrollToFirstRowOnChange | | boolean | - |
| x | | string | number | true | - |
| y | | string | number | - |

##### selection

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| key | | string | - |
| text | | ReactNode | - |
| onSelect | | function(changeableRowKeys) | - |

##### TypeScript Example

```tsx
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';

interface User {
  key: number;
  name: string;
}

const columns: TableColumnsType<User> = [
  { key: 'name', title: 'Name', dataIndex: 'name' },
];

const data: User[] = [{ key: 0, name: 'Jack' }];

const Demo: React.FC = () => (
  <>
    <Table<User> columns={columns} dataSource={data} />
    <Table<User> dataSource={data}>
      <Table.Column<User> key="name" title="Name" dataIndex="name" />
    </Table<User>>
  </>
);
```

---

### Tooltip

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| mode | | 'dark' | 'light' | 'dark' |
| maxHeight | | number | string | '90vh' |

#### antd API (shared by Tooltip, Popconfirm, Popover)

[API Reference](https://ant.design/components/tooltip-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| title | | ReactNode | () => ReactNode | - |
| align | | object | - |
| arrow | | boolean | { pointAtCenter: boolean } | true | 5.2.0 |
| autoAdjustOverflow | | boolean | true |
| color | | string | - | 4.3.0 |
| defaultOpen | | boolean | false | 4.23.0 |
| destroyOnHidden | | boolean | false | 5.25.0 |
| fresh | | boolean | false | 5.10.0 |
| getPopupContainer | | (triggerNode: HTMLElement) => HTMLElement | () => document.body |
| mouseEnterDelay | | number (seconds) | 0.1 |
| mouseLeaveDelay | | number (seconds) | 0.1 |
| placement | | string | top |
| trigger | | string | string[] | hover |
| open | | boolean | false | 4.23.0 |
| zIndex | | number | - |
| onOpenChange | | (open: boolean) => void | - | 4.23.0 |

---

### Tag

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| size | | 'small' | 'middle' | 'middle' |
| color | | SparkTagColors | string | 'purple' |

#### antd API

[API Reference](https://ant.design/components/tag-cn/#api)
[Common Props](/docs/react/common-props)

##### Tag

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| closeIcon | | ReactNode | false | 4.4.0 |
| icon | | ReactNode | - |
| bordered | | boolean | true | 5.4.0 |
| onClose | | (e: React.MouseEvent) => void | - |

##### Tag.CheckableTag

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| checked | | boolean | false |
| onChange | | (checked) => void | - |

---

### Tabs

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| type | | 'line' | 'card' | 'editable-card' | 'segmented' | true |

#### antd API

[API Reference](https://ant.design/components/tabs-cn/#api)
[Common Props](/docs/react/common-props)

##### Tabs

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| activeKey | | string | - |
| addIcon | | ReactNode | + | 4.4.0 |
| animated | | boolean | { inkBar, tabPane } | { inkBar: true, tabPane: false } |
| centered | | boolean | false | 4.4.0 |
| defaultActiveKey | | string | first key |
| hideAdd | | boolean | false |
| indicator | | { size?, align } | - | 5.13.0 |
| items | | TabItemType[] | [] | 4.23.0 |
| more | | MoreProps | - |
| removeIcon | | ReactNode | - | 5.15.0 |
| popupClassName | | string | - | 4.21.0 |
| renderTabBar | | (props, DefaultTabBar) => React.ReactElement | - |
| size | | 'small' | 'middle' | 'large' | middle |
| tabBarExtraContent | | ReactNode | { left?, right? } | - | object: 4.6.0 |
| tabBarGutter | | number | - |
| tabBarStyle | | CSSProperties | - |
| tabPosition | | 'top' | 'right' | 'bottom' | 'left' | top |
| destroyOnHidden | | boolean | false | 5.25.0 |
| onChange | | (activeKey: string) => void | - |
| onEdit | | (action === 'add' ? event : targetKey, action) => void | - |
| onTabClick | | (key: string, event: MouseEvent) => void | - |
| onTabScroll | | ({ direction }) => void | - | 4.3.0 |

##### TabItemType

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| closeIcon | | ReactNode | - |
| destroyOnHidden | | boolean | false | 5.25.0 |
| disabled | | boolean | false |
| forceRender | | boolean | false |
| key | | string | - |
| label | | ReactNode | - |
| icon | | ReactNode | - | 5.12.0 |
| children | | ReactNode | - |
| closable | | boolean | true |

---

### Image

#### antd API

[API Reference](https://ant.design/components/image-cn/#api)
[Common Props](/docs/react/common-props)

##### Image

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| alt | | string | - | 4.6.0 |
| fallback | | string | - | 4.6.0 |
| height | | string | number | - | 4.6.0 |
| placeholder | | ReactNode | - | 4.6.0 |
| preview | | boolean | PreviewType | true | 4.6.0 |
| src | | string | - | 4.6.0 |
| width | | string | number | - | 4.6.0 |
| onError | | (event: Event) => void | - | 4.12.0 |

##### PreviewType

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| visible | | boolean | - |
| src | | string | - | 4.10.0 |
| getContainer | | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 |
| movable | | boolean | true | 5.8.0 |
| mask | | ReactNode | - | 4.9.0 |
| maskClassName | | string | - | 4.11.0 |
| rootClassName | | string | - | 5.4.0 |
| scaleStep | | number | 0.5 |
| minScale | | number | 1 | 5.7.0 |
| maxScale | | number | 50 | 5.7.0 |
| closeIcon | | React.ReactNode | - | 5.7.0 |
| forceRender | | boolean | - |
| toolbarRender | | (originalNode, info: ToolbarRenderInfoType) => ReactNode | - | 5.7.0 |
| imageRender | | (originalNode, info) => ReactNode | - | 5.7.0 |
| destroyOnHidden | | boolean | false | 5.25.0 |
| onTransform | | (info: { transform: TransformType }) => void | - | 5.7.0 |
| onVisibleChange | | (visible, prevVisible) => void | - |

##### PreviewGroup

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| preview | | boolean | PreviewGroupType | true | 4.6.0 |
| items | | string[] | { src, crossOrigin, ... }[] | - | 5.7.0 |
| fallback | | string | - | 5.7.0 |

##### TransformType

```typescript
{
  x: number;
  y: number;
  rotate: number;
  scale: number;
  flipX: boolean;
  flipY: boolean;
}
```

##### TransformAction

```typescript
type TransformAction =
  | 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight'
  | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next'
  | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'reset';
```

---

### Statistic

#### antd API

[API Reference](https://ant.design/components/statistic-cn/#api)
[Common Props](/docs/react/common-props)

##### Statistic

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| decimalSeparator | | string | . |
| formatter | | (value) => ReactNode | - |
| groupSeparator | | string | , |
| loading | | boolean | false | 4.8.0 |
| precision | | number | - |
| prefix | | ReactNode | - |
| suffix | | ReactNode | - |
| title | | ReactNode | - |
| value | | string | number | - |
| valueStyle | | CSSProperties | - |

##### Statistic.Timer (5.25.0+)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| type | | 'countdown' | 'countup' | - |
| format | | string | HH:mm:ss |
| prefix | | ReactNode | - |
| suffix | | ReactNode | - |
| title | | ReactNode | - |
| value | | number | - |
| valueStyle | | CSSProperties | - |
| onFinish | | () => void | - |
| onChange | | (value: number) => void | - |

---

### Descriptions

#### antd API

[API Reference](https://ant.design/components/descriptions-cn/#api)
[Common Props](/docs/react/common-props)

##### Descriptions

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| bordered | | boolean | false |
| colon | | boolean | true |
| column | | number | ResponsiveConfig | 3 |
| extra | | ReactNode | - | 4.5.0 |
| items | | DescriptionItemType[] | - | 5.8.0 |
| layout | | 'horizontal' | 'vertical' | horizontal |
| size | | 'default' | 'middle' | 'small' | - |
| title | | ReactNode | - |
| classNames | | Record | - | 5.23.0 |
| styles | | Record | - | 5.23.0 |

##### DescriptionItem

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| label | | ReactNode | - |
| span | | number | ResponsiveConfig | 1 | screens: 5.9.0 |

---

### Avatar

#### antd API

[API Reference](https://ant.design/components/avatar-cn/#api)
[Common Props](/docs/react/common-props)

##### Avatar

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| alt | | string | - |
| gap | | number | 4 | 4.3.0 |
| icon | | ReactNode | - |
| shape | | 'circle' | 'square' | circle |
| size | | number | 'large' | 'default' | 'small' | ResponsiveConfig | default | 4.7.0 |
| src | | string | ReactNode | - | ReactNode: 4.8.0 |
| srcSet | | string | - |
| draggable | | boolean | 'true' | 'false' | true |
| crossOrigin | CORS | 'anonymous' | 'use-credentials' | - | 4.17.0 |
| onError | | () => boolean | - |

##### Avatar.Group (4.5.0+)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| max | | { count?, style?, popover? } | - | 5.18.0 |
| size | | number | 'large' | 'default' | 'small' | ResponsiveConfig | default | 4.8.0 |
| shape | | 'circle' | 'square' | circle | 5.8.0 |

---

### Card

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| info | | ReactNode | |

#### antd API

[API Reference](https://ant.design/components/card-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| actions | | Array<ReactNode> | - |
| activeTabKey | | string | - |
| variant | | 'outlined' | 'borderless' | 'filled' | outlined | 5.24.0 |
| cover | | ReactNode | - |
| defaultActiveTabKey | | string | first key |
| extra | | ReactNode | - |
| hoverable | | boolean | false |
| loading | | boolean | false |
| size | | 'default' | 'small' | default |
| tabBarExtraContent | | ReactNode | - |
| tabList | | TabItemType[] | - |
| tabProps | | TabsProps | - |
| title | | ReactNode | - |
| type | | string | - |
| classNames | | Record | - | 5.14.0 |
| styles | | Record | - | 5.14.0 |
| onTabChange | | (key) => void | - |

##### Card.Grid

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| className | | string | - |
| hoverable | | boolean | true |
| style | | CSSProperties | - |

##### Card.Meta

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| avatar | | ReactNode | - |
| className | | string | - |
| description | | ReactNode | - |
| style | | CSSProperties | - |
| title | | ReactNode | - |

---

### CodeBlock

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| language | | string | string[] | |
| value | | string | |
| className | | string | |
| theme | | 'dark' | 'light' | |
| readOnly | | boolean | |
| onChange | | (value?: string) => void | |

---

### FileIcon

#### Spark API

##### FileIcon Props

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| src | | string | |
| image | | string | |
| type | | string | |
| size | | number | |
| style | | React.CSSProperties | |

##### FileCard Props

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| iconSize | | number | |
| src | | string | |
| type | | string | |
| name | | string | |
| desc | | string | |
| size | | number | |
| width | | React.CSSProperties['width'] | |
| children | | React.ReactNode | |

---

### Skeleton

#### antd API

[Common Props](/docs/react/common-props)

##### Skeleton

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| active | | boolean | false |
| avatar | | boolean | SkeletonAvatarProps | false |
| loading | | boolean | - |
| paragraph | | boolean | SkeletonParagraphProps | true |
| round | | boolean | false |
| title | | boolean | SkeletonTitleProps | true |

##### SkeletonAvatarProps

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| active | | boolean | false |
| shape | | 'circle' | 'square' | - |
| size | | number | 'large' | 'small' | 'default' | - |

##### SkeletonTitleProps

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| width | | number | string | - |

##### SkeletonParagraphProps

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| rows | | number | - |
| width | | number | string | Array<number | string> | - |

##### SkeletonButtonProps

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| active | | boolean | false |
| block | | boolean | false | 4.17.0 |
| shape | | 'circle' | 'round' | 'square' | 'default' | - |
| size | | 'large' | 'small' | 'default' | - |

##### SkeletonInputProps

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| active | | boolean | false |
| size | | 'large' | 'small' | 'default' | - |

---

## Feedback Components

### Modal

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| info | | string | React.ReactNode | |
| showDivider | | boolean | true |

#### antd API

[API Reference](https://ant.design/components/modal-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| afterClose | | function | - |
| classNames | | Record | - |
| styles | | Record | - | 5.10.0 |
| cancelButtonProps | | ButtonProps | - |
| cancelText | | ReactNode | Cancel |
| centered | | boolean | false |
| closable | | boolean | { closeIcon?, disabled? } | true |
| closeIcon | | ReactNode | X | 5.7.0 |
| confirmLoading | | boolean | false |
| destroyOnHidden | | boolean | false | 5.25.0 |
| focusTriggerAfterClose | | boolean | true | 4.9.0 |
| footer | | ReactNode | (originNode, extra) => ReactNode | null | OK + Cancel | 5.9.0 |
| forceRender | | boolean | false |
| getContainer | | HTMLElement | () => HTMLElement | Selectors | false | document.body |
| keyboard | | boolean | true |
| mask | | boolean | true |
| maskClosable | | boolean | true |
| modalRender | | (node: ReactNode) => ReactNode | - | 4.7.0 |
| okButtonProps | | ButtonProps | - |
| okText | | ReactNode | OK |
| okType | | string | primary |
| style | | CSSProperties | - |
| loading | | boolean | false | 5.18.0 |
| title | | ReactNode | - |
| open | | boolean | - |
| width | | string | number | Breakpoint | 520 | Breakpoint: 5.23.0 |
| wrapClassName | | string | - |
| zIndex | | number | 1000 |
| onCancel | | function(e) | - |
| onOk | | function(e) | - |
| afterOpenChange | | (open: boolean) => void | - | 5.4.0 |

##### Modal.method()

Methods: `Modal.info`, `Modal.success`, `Modal.error`, `Modal.warning`, `Modal.confirm`

```jsx
const modal = Modal.info();
modal.update({ title: 'Updated', content: 'New content' });
modal.update((prevConfig) => ({ ...prevConfig, title: `${prevConfig.title} (updated)` }));
modal.destroy();

// Destroy all
Modal.destroyAll();
```

##### Modal.useModal()

```jsx
const [modal, contextHolder] = Modal.useModal();
// modal.confirm returns a Promise
const confirmed = await modal.confirm({ ... });
return <div>{contextHolder}</div>;
```

---

### Drawer

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| showDivider | | boolean | true |

##### Drawer.Confirm

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| footer | | React.ReactNode | |
| onOk | | () => void | |
| okText | | string | |
| okButtonProps | | ButtonProps | |
| onCancel | | () => void | |
| cancelText | | string | |
| cancelButtonProps | | ButtonProps | |
| info | | React.ReactNode | |

#### antd API

[API Reference](https://ant.design/components/drawer-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| autoFocus | | boolean | true | 4.17.0 |
| afterOpenChange | | function(open) | - |
| className | | string | - |
| classNames | | Record | - | 5.10.0 |
| closeIcon | | ReactNode | X | 5.7.0 |
| destroyOnHidden | | boolean | false | 5.25.0 |
| extra | | ReactNode | - | 4.17.0 |
| footer | | ReactNode | - |
| forceRender | | boolean | false |
| getContainer | | HTMLElement | () => HTMLElement | Selectors | false | body |
| height | | string | number | 378 |
| keyboard | | boolean | true |
| mask | | boolean | true |
| maskClosable | | boolean | true |
| placement | | 'top' | 'right' | 'bottom' | 'left' | right |
| push | | boolean | { distance: string | number } | { distance: 180 } | 4.5.0+ |
| rootStyle | | CSSProperties | - |
| size | | 'default' | 'large' | 'default' | 4.17.0 |
| style | | CSSProperties | - |
| styles | | Record | - | 5.10.0 |
| title | | ReactNode | - |
| loading | | boolean | false | 5.17.0 |
| open | | boolean | - |
| width | | string | number | 378 |
| zIndex | | number | 1000 |
| onClose | | function(e) | - |
| drawerRender | | (node: ReactNode) => ReactNode | - | 5.18.0 |

---

### Message

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| conent | | string | "" |

#### antd API

[API Reference](https://ant.design/components/message-cn/#api)
[Common Props](/docs/react/common-props)

Usage:
- `message.success(content, [duration], onClose)`
- `message.error(content, [duration], onClose)`
- `message.info(content, [duration], onClose)`
- `message.warning(content, [duration], onClose)`
- `message.loading(content, [duration], onClose)`

Returns a Promise: `message[level](content, [duration]).then(afterClose)`

##### message.open(config)

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| className | | string | - |
| content | | ReactNode | - |
| duration | | number (0 = no auto close) | 3 |
| icon | | ReactNode | - |
| key | | string | number | - |
| style | | CSSProperties | - |
| onClick | | function | - |
| onClose | | function | - |

##### message.config

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| duration | | number | 3 |
| getContainer | | () => HTMLElement | () => document.body |
| maxCount | | number | - |
| prefixCls | | string | ant-message | 4.5.0 |
| rtl | | boolean | false |
| top | | string | number | 8 |

---

### Notification

#### antd API

[API Reference](https://ant.design/components/notification-cn/#api)
[Common Props](/docs/react/common-props)

Usage:
- `notification.success(config)`
- `notification.error(config)`
- `notification.info(config)`
- `notification.warning(config)`
- `notification.open(config)`
- `notification.destroy(key?: String)`

##### config

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| actions | | ReactNode | - | 5.24.0 |
| className | | string | - |
| closeIcon | | ReactNode | true | 5.7.0 |
| description | | ReactNode | - |
| duration | | number (null = no auto close) | 4.5 |
| showProgress | | boolean | false | 5.18.0 |
| pauseOnHover | | boolean | true | 5.18.0 |
| icon | | ReactNode | - |
| key | | string | - |
| message | | ReactNode | - |
| placement | | string | topRight |
| style | | CSSProperties | - |
| role | | 'alert' | 'status' | alert | 5.6.0 |
| onClick | | function | - |
| onClose | | function | - |
| props | | Object | - |

##### notification.useNotification(config)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| bottom | | number | 24 |
| closeIcon | | ReactNode | true | 5.7.0 |
| getContainer | | () => HTMLNode | () => document.body |
| placement | | string | topRight |
| showProgress | | boolean | false | 5.18.0 |
| pauseOnHover | | boolean | true | 5.18.0 |
| rtl | | boolean | false |
| stack | | boolean | { threshold: number } | { threshold: 3 } | 5.10.0 |
| top | | number | 24 |
| maxCount | | number | - | 4.17.0 |

---

### Alert

#### antd API

[API Reference](https://ant.design/components/alert-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| action | | ReactNode | - | 4.9.0 |
| afterClose | | () => void | - |
| banner | | boolean | false |
| closable | | boolean | { closeIcon? } | false | 5.15.0 |
| description | | ReactNode | - |
| icon | | ReactNode | - |
| message | | ReactNode | - |
| showIcon | | boolean | false |
| type | | 'success' | 'info' | 'warning' | 'error' | info |
| onClose | | (e: MouseEvent) => void | - |

##### Alert.ErrorBoundary

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| description | | ReactNode | error stack |
| message | | ReactNode | error message |

---

### AlertDialog

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| type | | 'success' | 'info' | 'warning' | 'error' | 'confirm' | info |
| danger | | boolean | false |
| content | | React.ReactNode | - |
| onClose | | (e: SyntheticEvent) => any | - |

Extends antd [Modal API](https://ant.design/components/modal-cn/#api).

---

### Popconfirm

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| type | | 'info' | 'warning' | 'error' | 'success' | 'confirm' | 'confirm' |

#### antd API

[API Reference](https://ant.design/components/popconfirm-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| cancelButtonProps | | ButtonProps | - |
| cancelText | | string | Cancel |
| disabled | | boolean | false |
| icon | | ReactNode | QuestionCircle |
| okButtonProps | | ButtonProps | - |
| okText | | string | OK |
| okType | | string | primary |
| showCancel | | boolean | true | 4.18.0 |
| title | | ReactNode | () => ReactNode | - |
| description | | ReactNode | () => ReactNode | - | 5.1.0 |
| onCancel | | function(e) | - |
| onConfirm | | function(e) | - |
| onPopupClick | | function(e) | - | 5.5.0 |

Also inherits [Tooltip common API](#antd-api-shared-by-tooltip-popconfirm-popover).

---

### Popover

#### antd API

[API Reference](https://ant.design/components/popover-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| content | | ReactNode | () => ReactNode | - |
| title | | ReactNode | () => ReactNode | - |

Also inherits [Tooltip common API](#antd-api-shared-by-tooltip-popconfirm-popover).

---

### Progress

#### antd API

[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| format | | function(percent, successPercent) | (percent) => percent + '%' |
| percent | | number | 0 |
| showInfo | | boolean | true |
| status | | 'success' | 'exception' | 'normal' | 'active' | - |
| strokeColor | | string | - |
| strokeLinecap | | 'round' | 'butt' | 'square' | round |
| success | | { percent: number, strokeColor: string } | - |
| trailColor | | string | - |
| type | | 'line' | 'circle' | 'dashboard' | line |
| size | | number | [number, number] | { width, height } | 'small' | 'default' | 'default' | 5.3.0 |

##### type="line"

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| steps | | number | - |
| rounding | | (step: number) => number | Math.round | 5.24.0 |
| strokeColor | | string | string[] | { from, to, direction } | - | 4.21.0 |
| percentPosition | | { align, type } | { align: "end", type: "outer" } | 5.18.0 |

##### type="circle"

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| steps | | number | { count, gap } | - | 5.16.0 |
| strokeColor | | string | { percentage: string } | - |
| strokeWidth | | number | 6 |

##### type="dashboard"

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| steps | | number | { count, gap } | - | 5.16.0 |
| gapDegree | | number (0~295) | 75 |
| gapPosition | | 'top' | 'bottom' | 'left' | 'right' | bottom |
| strokeWidth | | number | 6 |

---

### Result

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| texture | | boolean | false |

---

### Spinner

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| tip | | React.ReactNode | - |
| indicator | | React.ReactNode | - |
| children | | React.ReactNode | - |
| style | | React.CSSProperties | - |
| className | | string | - |
| percent | | number | - |
| spinning | | boolean | false |
| showProgress | | boolean | false |

---

## Navigation Components

### Steps

#### antd API

[API Reference](https://ant.design/components/steps-cn/#api)
[Common Props](/docs/react/common-props)

##### Steps

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| className | | string | - |
| current | | number | 0 |
| direction | | 'horizontal' | 'vertical' | horizontal |
| initial | | number | 0 |
| labelPlacement | | 'horizontal' | 'vertical' | horizontal |
| percent | | number | - | 4.5.0 |
| progressDot | | boolean | (iconDot, { index, status, title, description }) => ReactNode | false |
| responsive | | boolean | true |
| size | | 'default' | 'small' | default |
| status | | 'wait' | 'process' | 'finish' | 'error' | process |
| type | | 'default' | 'navigation' | 'inline' | default | inline: 5.0 |
| onChange | | (current) => void | - |
| items | | StepItem[] | [] | 4.24.0 |

##### StepItem

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| description | | ReactNode | - |
| disabled | | boolean | false |
| icon | | ReactNode | - |
| status | | 'wait' | 'process' | 'finish' | 'error' | wait |
| subTitle | | ReactNode | - |
| title | | ReactNode | - |

---

### Pagination

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| hideSwitchButton | | boolean | false |

#### antd API

[API Reference](https://ant.design/components/pagination-cn/#api)
[Common Props](/docs/react/common-props)

```jsx
<Pagination onChange={onChange} total={50} />
```

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| align | | 'start' | 'center' | 'end' | - | 5.19.0 |
| current | | number | - |
| defaultCurrent | | number | 1 |
| defaultPageSize | | number | 10 |
| disabled | | boolean | - |
| hideOnSinglePage | | boolean | false |
| itemRender | | (page, type, originalElement) => React.ReactNode | - |
| pageSize | | number | - |
| pageSizeOptions | | number[] | [10, 20, 50, 100] |
| responsive | | boolean | - |
| showLessItems | | boolean | false |
| showQuickJumper | | boolean | { goButton: ReactNode } | false |
| showSizeChanger | | boolean | SelectProps | - | SelectProps: 5.21.0 |
| showTitle | | boolean | true |
| showTotal | | function(total, range) | - |
| simple | | boolean | { readOnly?: boolean } | - |
| size | | 'default' | 'small' | default |
| total | | number | 0 |
| onChange | | function(page, pageSize) | - |
| onShowSizeChange | | function(current, size) | - |

---

### Breadcrumb

#### Spark API - BreadcrumbItems

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| title | | string | React.ReactNode | |
| iconUrl | | string | '' |
| dropdown | | { items: Array<{ key: string; label: React.ReactNode }> } | |

#### antd API

[API Reference](https://ant.design/components/breadcrumb-cn/#api)
[Common Props](/docs/react/common-props)

##### Breadcrumb

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| itemRender | | (route, params, routes, paths) => ReactNode | - |
| params | | object | - |
| separator | | ReactNode | / |

##### RouteItemType

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| className | | string | - |
| dropdownProps | | DropdownProps | - |
| href | | string | - |
| path | | string | - |
| menu | | MenuProps | - | 4.24.0 |
| onClick | | (e: MouseEvent) => void | - |

##### SeparatorType (5.3.0+)

```ts
const item = {
  type: 'separator',
  separator: '/',
};
```

##### browserHistory with react-router

```jsx
import { Link } from 'react-router';

function itemRender(currentRoute, params, items, paths) {
  const isLast = currentRoute?.path === items[items.length - 1]?.path;
  return isLast ? (
    <span>{currentRoute.title}</span>
  ) : (
    <Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
  );
}

return <Breadcrumb itemRender={itemRender} items={items} />;
```

---

### Dropdown

#### antd API

[API Reference](https://ant.design/components/dropdown-cn/#api)
[Common Props](/docs/react/common-props)

##### Dropdown

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| arrow | | boolean | { pointAtCenter: boolean } | false |
| autoAdjustOverflow | | boolean | true | 5.2.0 |
| autoFocus | | boolean | false | 4.21.0 |
| disabled | | boolean | - |
| destroyOnHidden | | boolean | false | 5.25.0 |
| popupRender | | (menus: ReactNode) => ReactNode | - | 5.25.0 |
| getPopupContainer | | (triggerNode: HTMLElement) => HTMLElement | () => document.body |
| menu | | MenuProps | - | 4.24.0 |
| overlayClassName | | string | - |
| overlayStyle | | CSSProperties | - |
| placement | | string | bottomLeft |
| trigger | | Array<'click' | 'hover' | 'contextMenu'> | ['hover'] |
| open | | boolean | - | 4.23.0 |
| onOpenChange | | (open, info: { source }) => void | - |

##### Dropdown.Button

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| buttonsRender | | (buttons: ReactNode[]) => ReactNode[] | - |
| loading | | boolean | { delay, icon } | false | icon: 5.23.0 |
| danger | | boolean | - | 4.23.0 |
| icon | | ReactNode | - |
| size | | 'large' | 'middle' | 'small' | middle |
| type | | 'primary' | 'dashed' | 'link' | 'text' | 'default' | default |
| onClick | | (event: React.MouseEvent) => void | - |

##### Menu (Dropdown inner menu)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| defaultOpenKeys | | string[] | - |
| defaultSelectedKeys | | string[] | - |
| expandIcon | | ReactNode | (props) => ReactNode | - | 4.9.0 |
| forceSubMenuRender | | boolean | false |
| inlineCollapsed | | boolean | - |
| inlineIndent | | number | 24 |
| items | | ItemType[] | - | 4.20.0 |
| mode | | 'vertical' | 'horizontal' | 'inline' | vertical |
| multiple | | boolean | false |
| openKeys | | string[] | - |
| overflowedIndicator | | ReactNode | ... |
| selectable | | boolean | true |
| selectedKeys | | string[] | - |
| style | | CSSProperties | - |
| subMenuCloseDelay | | number (seconds) | 0.1 |
| subMenuOpenDelay | | number (seconds) | 0 |
| theme | | 'light' | 'dark' | light |
| triggerSubMenuAction | | 'hover' | 'click' | hover |
| onClick | | function({ item, key, keyPath, domEvent }) | - |
| onDeselect | | function({ item, key, keyPath, selectedKeys, domEvent }) | - |
| onOpenChange | | function(openKeys: string[]) | - |
| onSelect | | function({ item, key, keyPath, selectedKeys, domEvent }) | - |

##### MenuItemType

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| danger | | boolean | false |
| disabled | | boolean | false |
| extra | | ReactNode | - | 5.21.0 |
| icon | | ReactNode | - |
| key | | string | - |
| label | | ReactNode | - |
| title | | string | - |

##### SubMenuType

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| children | | ItemType[] | - |
| disabled | | boolean | false |
| icon | | ReactNode | - |
| key | | string | - |
| label | | ReactNode | - |
| popupClassName | | string | - |
| popupOffset | | [number, number] | - |
| onTitleClick | | function({ key, domEvent }) | - |
| theme | | 'light' | 'dark' | - |

##### MenuItemGroupType

```ts
const groupItem = {
  type: 'group',
  label: 'My Group',
  children: [],
};
```

##### MenuDividerType

```ts
const dividerItem = {
  type: 'divider',
};
```

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| dashed | | boolean | false |

---

### FloatButton

#### antd API

[API Reference](https://ant.design/components/float-button-cn/#api)
[Common Props](/docs/react/common-props)

(antd 5.0.0+)

##### FloatButton

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| icon | | ReactNode | - |
| description | | ReactNode | - |
| tooltip | | ReactNode | TooltipProps | - | TooltipProps: 5.25.0 |
| type | | 'default' | 'primary' | default |
| shape | | 'circle' | 'square' | circle |
| onClick | | (event) => void | - |
| href | | string | - |
| target | | string | - |
| htmlType | | 'submit' | 'reset' | 'button' | button | 5.21.0 |
| badge | | BadgeProps | - | 5.4.0 |

##### FloatButton.Group

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| shape | | 'circle' | 'square' | circle |
| trigger | | 'click' | 'hover' | - |
| open | | boolean | - |
| closeIcon | | React.ReactNode | X |
| placement | | 'top' | 'right' | 'bottom' | 'left' | top | 5.21.0 |
| onOpenChange | | (open: boolean) => void | - |
| onClick | | (event) => void | - | 5.3.0 |

##### FloatButton.BackTop

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| duration | | number (ms) | 450 |
| target | | () => HTMLElement | () => window |
| visibilityHeight | | number | 400 |
| onClick | | () => void | - |

---

### Anchor

#### antd API

[API Reference](https://ant.design/components/anchor-cn/#api)
[Common Props](/docs/react/common-props)

##### Anchor Props

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| affix | | boolean | Omit<AffixProps> | true | object: 5.19.0 |
| bounds | | number | 5 |
| getContainer | | () => HTMLElement | () => window |
| getCurrentAnchor | | (activeLink: string) => string | - |
| offsetTop | | number | |
| showInkInFixed | | boolean | false |
| targetOffset | | number | - |
| onChange | | (currentActiveLink: string) => void | - |
| onClick | | (e: MouseEvent, link: object) => void | - |
| items | | AnchorItem[] | - | 5.1.0 |
| direction | | 'vertical' | 'horizontal' | vertical | 5.2.0 |
| replace | | boolean | false | 5.7.0 |

##### AnchorItem

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| key | | string | number | - |
| href | | string | - |
| target | | string | - |
| title | | ReactNode | - |
| children | | AnchorItem[] | - |
| replace | | boolean | false | 5.7.0 |

---

## Layout Components

### Collapse

#### antd API

[API Reference](https://ant.design/components/collapse-cn/#api)
[Common Props](/docs/react/common-props)

##### Collapse

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| accordion | | boolean | false |
| activeKey | | string[] | string | |
| bordered | | boolean | true |
| collapsible | | 'header' | 'icon' | 'disabled' | - | 4.9.0 |
| defaultActiveKey | | string[] | string | - |
| destroyOnHidden | | boolean | false | 5.25.0 |
| expandIcon | | (panelProps) => ReactNode | - |
| expandIconPosition | | 'start' | 'end' | - | 4.21.0 |
| ghost | | boolean | false | 4.4.0 |
| size | | 'large' | 'middle' | 'small' | middle | 5.2.0 |
| onChange | | function | - |
| items | | ItemType[] | - | 5.6.0 |

##### ItemType

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| classNames | | Record | - | 5.21.0 |
| collapsible | | 'header' | 'icon' | 'disabled' | - |
| forceRender | | boolean | false |
| key | | string | number | - |
| label | | ReactNode | - |
| showArrow | | boolean | true |
| styles | | Record | - | 5.21.0 |

---

### CollapsePanel

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| collapsedHeight | | number | 0 |
| expandedHeight | | number | 300 |
| title | | string | React.ReactNode | "" |
| expandOnPanelClick | | boolean | false |
| extra | | React.ReactNode | |
| children | | React.ReactNode | |
| defaultExpanded | | boolean | false |
| classNames | | Partial<Record<string, string>> | |
| styles | | Partial<Record<string, CSSProperties>> | |

Extends antd [Collapse](#collapse) API.

---

## Action Components

### Button

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| size | | 'small' | 'middle' | 'large' | 'middle' |
| type | | 'primary' | 'dashed' | 'link' | 'text' | 'default' | 'primaryLess' | 'textCompact' | 'default' |
| tooltipContent | | string | ReactNode | |
| iconType | iconfont key | string | |
| iconSize | | SparkIconFontProps['size'] | |

#### antd API

[API Reference](https://ant.design/components/button-cn/#api)
[Common Props](/docs/react/common-props)

| Property | Description | Type | Default | Version |
|----------|-------------|------|---------|---------|
| autoInsertSpace | | boolean | true | 5.17.0 |
| block | | boolean | false |
| classNames | | Record | - | 5.4.0 |
| color | | 'default' | 'primary' | 'danger' | PresetColors | default |
| danger | | boolean | false |
| disabled | | boolean | false |
| ghost | | boolean | false |
| href | | string | - |
| htmlType | | 'submit' | 'reset' | 'button' | button |
| iconPosition | | 'start' | 'end' | start | 5.17.0 |
| loading | | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
| styles | | Record | - | 5.4.0 |
| target | | string | - |
| onClick | | (event: React.MouseEvent) => void | - |
| variant | | 'outlined' | 'dashed' | 'solid' | 'filled' | 'text' | 'link' | - | 5.21.0 |

##### PresetColors

```typescript
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink'
  | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
```

---

### IconButton

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| icon | | ReactNode | string | |
| iconType | iconfont key | string | |
| bordered | | boolean | true |
| shape | | 'default' | 'circle' | 'default' |

Extends antd [Button](#button) API.

---

## Other Components

### Empty

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| type | | 'noData' | 'networkError' | '404' | 'arrears' | 'desktopOnly' | 'noAudio' | 'noImage' | 'noVideo' | 'noAccess' | 'error' | 'noChat' | 'noModel' | 'noApp' | 'success' | 'failed' | 'inProgress' | 'stayTuned' | 'noData' |
| texture | | boolean | true |
| image | | string | no data |
| imageStyle | | React.CSSProperties | |
| title | | React.ReactNode | |
| description | | React.ReactNode | |
| onOk | | (e: React.MouseEvent) => void | |
| okText | | React.ReactNode | |
| okType | | SparkButtonProps['type'] | 'primary' |
| okButtonProps | | SparkButtonProps | |
| children | | React.ReactNode | |
| className | | string | |
| style | | React.CSSProperties | |
| size | | React.CSSProperties['width'] | |
| autoFit | | boolean | false |

[antd API Reference](https://ant.design/components/empty-cn/#api)

---

### Video

#### Spark API

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| mouseEnterAutoPlay | | boolean | false |
| children | | React.ReactNode | |

---

### Audio

No additional API documented.

---

## Icon Library

Import icons from `@agentscope-ai/icons`:

```tsx
import { SparkLoadingLine } from '@agentscope-ai/icons';

export default () => (
  <SparkLoadingLine
    className="your-class-name"
    style={{ color: 'var(--sps-color-primary)' }}
    spin
    size={48}
  />
);
```

Browse all icons at the [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons).

### Usage Patterns

```tsx
// Import by name
import { SparkSearchLine } from '@agentscope-ai/icons';

// Use as JSX
<SparkSearchLine style={{ fontSize: 24 }} />

// Import statement
import { SparkIconName } from '@agentscope-ai/icons';
```

All icon names follow the pattern `Spark<Name><Style>` where Style is typically `Line` or `Fill`.