Components / agents

Reasoning

The model reasoning, folded away once it is done: a button reading Thinking (a moving dot, open) or Thought for 12 seconds that shows the steps.

import { Reasoning } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Reasoning } from '@basiiik/ui';

<Reasoning>Checked which dialog components exist.</Reasoning>

• Hover and Focused are CSS on the native button. Open is the open prop (or defaultOpen); while status="thinking" it starts open, when done it starts closed.
• Storybook: Agents/Reasoning.

Props

States. Hover and Focused are CSS on the native button. Open is the open prop (or defaultOpen); while status="thinking" it starts open, when done it starts closed.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Show or fold the model's thinking before its answer
• A status line that has detail behind it ("Searching the docs")

Do not use it when

• Content that everyone must read (put it in the message)
• A general collapsible section (use Accordion)

Rules for agents

• Put it inside the assistant ChatMessage, before the answer
• Set status="thinking" while it runs and status="done" with duration (seconds) when it ends
• Pass the reasoning as children, already rendered; keep steps short
• Use label when something more specific than Thinking helps ("Searching the docs")

Avoid

• Showing the whole reasoning open under every answer
• A div with a click handler as the toggle
• Hiding the status: always let the header say whether the model is still thinking

Writing the content

• Label: a short present participle while running, "Thinking" or "Reading the spec"
• Body: plain sentences, one step per line

Keyboard

• Enter and Space open and close it
• Tab moves to the header button

Accessibility

• A native button with aria-expanded and aria-controls; the panel is a region named by the button
• The moving dot is hidden from assistive technology; the header text says Thinking or Thought for N seconds
• It is not a heading, so it does not change the page outline

Colour tokens it reads

Related

• Chat Message
• Tool Call
• Accordion

agents 4 Figma variants Try it in the live demo