logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Overview
  • Common
    • Bubble
    • Conversations
    • Notification
  • Confirmation
    • Sources
    • Think
    • ThoughtChain
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Feedback
    • Actions
    • FileCard
  • Others
    • XProvider

Think

Show deep thinking process.
Importimport { Think } from "@ant-design/x";
Sourcecomponents/think
Docs
Edit this page...
Changelog
loading

When To Use

Used to show deep thinking process.

Examples

API

Common props ref:Common props

ThinkProps

PropertyDescriptionTypeDefaultVersion
classNamesDOM classRecord<SemanticDOM, string>--
stylesDOM styleRecord<SemanticDOM, CSSProperties>--
childrenThink ContentReact.ReactNode--
titleText of statusReact.ReactNode--
iconShow iconReact.ReactNode--
loadingLoadingboolean | React.ReactNodefalse-
defaultExpandedDefault Expand statebooleantrue-
expandedExpand stateboolean--
onExpandCallback when expand changes(expand: boolean) => void--

Semantic DOM

Design Token

Global TokenHow to use?
Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Status

Customize status text and status icon.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Expand

Control expand and collapse state.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
deep thinking
This is deep thinking content.

Complete thinking
This is deep thinking content.

Complete thinking
Customize status icon.

deep thinking
This is deep thinking content.
deep thinking
This is deep thinking content.
  • root
    Root
  • status
    Status
  • content
    Content