Actions - Ant Design X

When to Use

The Actions component is used for quickly configuring required action buttons or features in some AI scenarios.

Examples

API

Common props ref：Common props

ActionsProps

Property	Description	Type	Default	Version
items	A list containing multiple action items	(ItemType \| ReactNode)[]	-	-
onClick	Callback function when an action item is clicked	function({ item, key, keyPath, domEvent })	-	-
dropdownProps	Configuration properties for dropdown menu	DropdownProps	-	-
variant	Variant	`borderless` \| `outlined` \|`filled`	`borderless`	-

ItemType

Property	Description	Type	Default	Version
key	The unique identifier for the custom action	string	-	-
label	The display label for the custom action	string	-	-
icon	The icon for the custom action	ReactNode	-	-
onItemClick	Callback function when the custom action button is clicked	(info: ItemType) => void	-	-
danger	Syntax sugar, set dangerous icon	boolean	false	-
subItems	Sub action items	Omit<ItemType, 'subItems' \| 'triggerSubMenuAction' \| 'actionRender'>[]	-	-
triggerSubMenuAction	Action to trigger the sub-menu	`hover` \| `click`	`hover`	-
actionRender	Custom render action item content	(item: ItemType) => ReactNode	-	-

Actions.Feedback

Property	Description	Type	Default	Version
value	Feedback value	`like` \| `dislike` \| `default`	`default`	-
onChange	Feedback status change callback	(value: `like` \| `dislike` \| `default`) => void	-	-

Actions.Copy

Property	Description	Type	Default	Version
text	Text to be copied	string	''	-
icon	Copy button	React.ReactNode	-	-

Actions.Audio

Property	Description	Type	Default	Version
status	Playback status	'loading'\|'error'\|'running'\|'default'	default	-

Actions.Item

Property	Description	Type	Default	Version
status	Status	'loading'\|'error'\|'running'\|'default'	default	-
label	Display label for the custom action	string	-	-
defaultIcon	Default status icon	React.ReactNode	-	-
runningIcon	Running status icon	React.ReactNode	-	-

Semantic DOM

Design Token

Global TokenHow to use?