Prompts

Used to display a set of predefined questions or suggestions related to the current context.

Examples

Basic

Disabled state

☕️ It's time to relax!

Task Completion Secrets

What are some tricks for getting tasks done?

Time for a Coffee Break

How to rest effectively after long hours of work?

Disabled state

To disable a prompt, add the disabled attribute to the prompt.

<script setup lang="tsx">
defineOptions({ name: 'AXPromptsDisabledV2' });

import { CheckCircleOutlined, CoffeeOutlined } from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';

const items: PromptsProps['items'] = [
  {
    key: '5',
    icon: <CheckCircleOutlined style={{ color: '#52C41A' }} />,
    label: 'Task Completion Secrets',
    description: 'What are some tricks for getting tasks done?',
    disabled: true,
  },
  {
    key: '6',
    icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
    label: 'Time for a Coffee Break',
    description: 'How to rest effectively after long hours of work?',
  },
];

defineRender(() => (
  <Prompts title="☕️ It's time to relax!" items={items} />
));
</script>

Hide source

Fade-in effect

✨ Inspirational Sparks and Marvelous Tips

Fade-in effect

Controls fade-in animation effects using the fadeIn and fadeInLeft attributes.

<script setup lang="tsx">
defineOptions({ name: 'AXPromptsFadeInV2' });

import {
  BulbOutlined,
  InfoCircleOutlined,
  RocketOutlined,
  SmileOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue';
import { Button, Flex, Switch, message } from 'ant-design-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';
import { ref } from 'vue';

const key = ref(0);
const fadeInLeft = ref(true);

const items: PromptsProps['items'] = [
  {
    key: '1',
    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
    label: 'Ignite Your Creativity',
    description: 'Got any sparks for a new project?',
  },
  {
    key: '2',
    icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
    label: 'Uncover Background Info',
    description: 'Help me understand the background of this topic.',
  },
  {
    key: '3',
    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
    label: 'Efficiency Boost Battle',
    description: 'How can I work faster and better?',
  },
  {
    key: '4',
    icon: <SmileOutlined style={{ color: '#52C41A' }} />,
    label: 'Tell me a Joke',
    description: 'Why do not ants get sick? Because they have tiny ant-bodies!',
  },
  {
    key: '5',
    icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
    label: 'Common Issue Solutions',
    description: 'How to solve common issues? Share some tips!',
  },
];

defineRender(() => (
  <Flex gap="middle" vertical>
    <Flex gap="middle" align="center">
      <Switch
        style={{ alignSelf: 'flex-end' }}
        checkedChildren="fadeInLeft"
        unCheckedChildren="fadeIn"
        v-model:checked={fadeInLeft.value}
      />
      <Button style={{ alignSelf: 'flex-end' }} onClick={() => (key.value++)}>
        Re-Render
      </Button>
    </Flex>
    <Prompts
      key={key.value}
      fadeIn={!fadeInLeft.value}
      fadeInLeft={fadeInLeft.value}
      title="✨ Inspirational Sparks and Marvelous Tips"
      items={items}
      onItemClick={(info) => {
        message.success(`You clicked a prompt: ${info.data.label}`);
      }}
    />
  </Flex>
));
</script>

Hide source

Vertical layout

🤔 You might also want to ask:

How to rest effectively after long hours of work?

What are the secrets to maintaining a positive mindset?

How to stay calm under immense pressure?

Vertical layout

Uses the vertical attribute to control the display direction of Prompts.

<script setup lang="tsx">
defineOptions({ name: 'AXPromptsFlexVerticalV2' });

import { CoffeeOutlined, FireOutlined, SmileOutlined } from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';

const items: PromptsProps['items'] = [
  {
    key: '6',
    icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
    description: 'How to rest effectively after long hours of work?',
    disabled: false,
  },
  {
    key: '7',
    icon: <SmileOutlined style={{ color: '#FAAD14' }} />,
    description: 'What are the secrets to maintaining a positive mindset?',
    disabled: false,
  },
  {
    key: '8',
    icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
    description: 'How to stay calm under immense pressure?',
    disabled: false,
  },
];

defineRender(() => (
  <Prompts title="🤔 You might also want to ask:" items={items} vertical />
));
</script>

Hide source

Wrap

✨ Inspirational Sparks and Marvelous Tips

Got any sparks for a new project?

Help me understand the background of this topic.

How to solve common issues? Share some tips!

How can I work faster and better?

What are some tricks for getting tasks done?

How to rest effectively after long hours of work?

What are the secrets to maintaining a positive mindset?

How to stay calm under immense pressure?

Wrap

Use the wrap property to control whether Prompts can wrap when exceeding the container length.

<script setup lang="tsx">
defineOptions({ name: 'AXPromptsFlexWrapV2' });

import {
  BulbOutlined,
  CheckCircleOutlined,
  CoffeeOutlined,
  FireOutlined,
  InfoCircleOutlined,
  RocketOutlined,
  SmileOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';

const items: PromptsProps['items'] = [
  {
    key: '1',
    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
    description: 'Got any sparks for a new project?',
  },
  {
    key: '2',
    icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
    description: 'Help me understand the background of this topic.',
  },
  {
    key: '3',
    icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
    description: 'How to solve common issues? Share some tips!',
  },
  {
    key: '4',
    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
    description: 'How can I work faster and better?',
  },
  {
    key: '5',
    icon: <CheckCircleOutlined style={{ color: '#52C41A' }} />,
    description: 'What are some tricks for getting tasks done?',
  },
  {
    key: '6',
    icon: <CoffeeOutlined style={{ color: '#964B00' }} />,
    description: 'How to rest effectively after long hours of work?',
  },
  {
    key: '7',
    icon: <SmileOutlined style={{ color: '#FAAD14' }} />,
    description: 'What are the secrets to maintaining a positive mindset?',
  },
  {
    key: '8',
    icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
    description: 'How to stay calm under immense pressure?',
  },
];

defineRender(() => (
  <Prompts title="✨ Inspirational Sparks and Marvelous Tips" items={items} wrap />
));
</script>

Hide source

Responsive width

✨ Inspirational Sparks and Marvelous Tips

Ignite Your Creativity

Got any sparks for a new project?

Uncover Background Info

Help me understand the background of this topic.

Efficiency Boost Battle

How can I work faster and better?

Tell me a Joke

Why do not ants get sick? Because they have tiny ant-bodies!

Common Issue Solutions

How to solve common issues? Share some tips!

Responsive width

Use wrap together with styles to display at a fixed width.

<script setup lang="tsx">
defineOptions({ name: 'AXPromptsFlexWrapFixedV2' });

import {
  BulbOutlined,
  InfoCircleOutlined,
  RocketOutlined,
  SmileOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue';
import { Prompts, type PromptsProps } from 'ant-design-x-vue';

const items: PromptsProps['items'] = [
  {
    key: '1',
    icon: <BulbOutlined style={{ color: '#FFD700' }} />,
    label: 'Ignite Your Creativity',
    description: 'Got any sparks for a new project?',
  },
  {
    key: '2',
    icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
    label: 'Uncover Background Info',
    description: 'Help me understand the background of this topic.',
  },
  {
    key: '3',
    icon: <RocketOutlined style={{ color: '#722ED1' }} />,
    label: 'Efficiency Boost Battle',
    description: 'How can I work faster and better?',
  },
  {
    key: '4',
    icon: <SmileOutlined style={{ color: '#52C41A' }} />,
    label: 'Tell me a Joke',
    description: 'Why do not ants get sick? Because they have tiny ant-bodies!',
  },
  {
    key: '5',
    icon: <WarningOutlined style={{ color: '#FF4D4F' }} />,
    label: 'Common Issue Solutions',
    description: 'How to solve common issues? Share some tips!',
  },
];

defineRender(() => (
  <Prompts
    title="✨ Inspirational Sparks and Marvelous Tips"
    items={items}
    wrap
    styles={{
      item: {
        flex: 'none',
        width: 'calc(50% - 6px)',
      },
    }}
  />
));
</script>

Hide source

Nested composition

Accessibility: When onItemClick is passed in, clickable prompt items will render as native buttons, can be focused with Tab, and activated with Enter / Space; disabled items will have the disabled attribute. Nested parent items and lists without onItemClick will still render as divs to avoid invalid buttons.

API

PromptsProps

Prop	Description	Type	Default	Version
classNames	Custom style class names, used for different parts of each prompt item	Record<SemanticType, string>	-	-
fadeIn	Enable fade-in on render	boolean	false	-
fadeInLeft	Whether to enable rendering with a left-to-right fade-in	boolean	false	-
items	List containing multiple prompt items	PromptProps[]	-	-
prefixCls	Prefix for style class names	string	-	-
rootClassName	Root class name	string	-	-
styles	Custom styles, used for different parts of each prompt item	Record<SemanticType, CSSProperties>	-	-
title	Title displayed at the top of the prompt list	VNode | string | (() => VNode | string)	-	-
vertical	When set to true, the prompt list will be arranged vertically	boolean	false	-
wrap	When set to true, the prompt list will automatically wrap	boolean	false	-
onItemClick	Callback function when a prompt item is clicked. If passed, clickable items are rendered as buttons and support keyboard activation	(info: { data: PromptProps }) => void	-	-

SemanticType

type SemanticType = 'root' | 'list' | 'item' | 'itemContent' | 'title' | 'subList' | 'subItem';

Prompts Slots

Slot	Description
title	The title displayed at the top of the prompt list

Prompts Ref

Prop	Description	Type
nativeElement	The root DOM element of the component	HTMLDivElement

PromptProps

Property	Description	Type	Default	Version
children	Nested sub-prompt items	PromptProps[]	-	-
description	Prompt description providing additional information	VNode	string	-
disabled	Disables click events when set to true	boolean	false	-
icon	The prompt icon displayed on the left side of the prompt item	VNode	-	-
key	Unique identifier used to distinguish each prompt item	string	-	-
label	Prompt label displaying the main content of the prompt	VNode	string	-

Semantic DOM

✨ Inspirational Sparks and Marvelous Tips

Ignite Your Creativity

Got any sparks for a new project?

Uncover Background Info

Help me understand the background of this topic.

Efficiency Boost Battle

How can I work faster and better?

• root

  根节点

• title

  标题容器

• list

  列表容器

• item

  列表项

• itemContent

  标题项内容

✨ Nested Prompts

🔥 Ignite Your Creativity

What sparks your creativity?

How do you get inspired?

🎨 Uncover Background Info

What is the background of this topic?

Why is this important?

• subList

  子列表容器

• subItem

  子列表项

Design Token

This component has no custom Component Token. Customize it through global Design Tokens.