# Suggested prompt

Package: @commenda/pathfinder@0.1.0
Page: /docs/components/suggested-prompt
Figma: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=1058-3

```tsx
import { SuggestedPrompt } from '@commenda/pathfinder/suggested-prompt';

<SuggestedPrompt
  label="Which filings are due in the next 30 days?"
  onSelect={setDraft}
/>;
```


## Usage [#usage]

```tsx
import { SuggestedPrompt } from '@commenda/pathfinder/suggested-prompt';

<SuggestedPrompt
  label="Review upcoming filings"
  prompt="Review all filings due in the next 30 days"
  onSelect={setDraft}
/>;
```

`onSelect` receives `prompt`, or `label` when no separate prompt is provided. The application decides whether selection fills the Composer or sends a first message. The example inserts text and focuses the editor; it does not send without review.

## API reference [#api-reference]

| Prop | Type | Requirement | Behavior |
| --- | --- | --- | --- |
| `label` | `string` | required | Required visible and accessible text |
| `prompt` | `string` | optional | Optional full text; defaults to label |
| `onSelect` | `((prompt: string) => void)` | required | Required selection callback |

## Design rules [#design-rules]

- **PROMPT-01:** Figma 1058:8: Copy13, one line, full radius, 12px horizontal/6px vertical inset, pearl200 fill and pearl300 hover/border. The hairline makes the exported frame 33px high around 32px content.
- **PROMPT-02:** Selection emits text; the library does not own requests or mutate a draft.
- **PROMPT-03:** Long labels truncate within their container while preserving the full accessible name and title. Prefer short, concrete tasks.

This uses native button semantics with its own prompt recipe; it is not a Button variant. Enter and Space activate it, and focus remains visible. For several starters use [Suggested prompt group](/docs/components/suggested-prompt-group).