# @lg-chat/message-prompts

> LeafyGreen UI Kit Message Prompts

Latest version **4.2.3** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @lg-chat/message-prompts
pnpm add @lg-chat/message-prompts
yarn add @lg-chat/message-prompts
bun add @lg-chat/message-prompts
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.2.3 |
| Published | 2026-10-02 |
| First published | 2024-03-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 122.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | aitchpgm, stephl3, thesonofthomp, _tsck, shaneeza |

## Links

- npm: https://www.npmjs.com/package/@lg-chat/message-prompts
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/message-prompts
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@lg-chat/message-prompts

## Dependencies (8)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3
- [@leafygreen-ui/tooltip](https://npm.io/package/@leafygreen-ui/tooltip.md) ^14.3.3
- [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5
- [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.6

## Recent versions

- 4.2.3 (latest) — 2026-10-02
- 4.2.2 — 2026-02-06
- 4.2.1 — 2026-01-21
- 4.2.0 — 2025-11-24
- 4.1.4 — 2025-11-13
- 4.1.3 — 2025-11-07
- 4.1.2 — 2025-10-31
- 4.1.1 — 2025-10-21
- 4.1.0 — 2025-10-13
- 4.0.6 — 2025-09-25
- 4.0.5 — 2025-09-10
- 4.0.4 — 2025-09-03
- 4.0.3 — 2025-07-03
- 4.0.2 — 2025-06-30
- 4.0.1 — 2025-06-16
- … 17 more at https://npm.io/package/@lg-chat/message-prompts/versions

## README

# Message Prompts

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/message-prompts.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/message-prompts/live-example/)

## Installation

### PNPM

```shell
pnpm add @lg-chat/message-prompts
```

### Yarn

```shell
yarn add @lg-chat/message-prompts
```

### NPM

```shell
npm install @lg-chat/message-prompts
```

## Example

```tsx
function MyComponent() {
  const [prompts, setPrompts] = useState([
    'What is MongoDB?',
    'How do I create a database?',
  ]);

  const handleClickRefresh = () => {
    // Fetch new prompts
    setPrompts(getNewPrompts());
  };

  return (
    <MessagePrompts
      label="Suggested Prompts"
      onClickRefresh={handleClickRefresh}
      enableHideOnSelect
    >
      {prompts.map(prompt => (
        <MessagePrompt key={prompt} onClick={() => console.log(prompt)}>
          {prompt}
        </MessagePrompt>
      ))}
    </MessagePrompts>
  );
}
```

## MessagePrompts Properties

| Prop                              | Type                                         | Description                                                                                                                                                                        | Default |
| --------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `enableHideOnSelect` _(optional)_ | `boolean`                                    | When true, the prompts container will transition (fade and shrink) when a prompt is selected.                                                                                      | `true`  |
| `label` _(optional)_              | `string`                                     | Optional label displayed above the message prompts.                                                                                                                                |         |
| `onClickRefresh` _(optional)_     | `React.MouseEventHandler<HTMLButtonElement>` | Event handler called when the refresh button is clicked. When provided, a refresh IconButton will be rendered next to the label. The button is disabled when a prompt is selected. |         |
| `...`                             | `HTMLElementProps<'div'>`                    | Props spread on root div element                                                                                                                                                   |         |

## MessagePrompt Properties

| Prop                    | Type                                         | Description                                                                                                            | Default |
| ----------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------- |
| `disabled` _(optional)_ | `boolean`                                    | Specifies that the MessagePrompt is disabled.                                                                          |         |
| `onClick` _(optional)_  | `React.MouseEventHandler<HTMLButtonElement>` | Event handler called onClick.                                                                                          |         |
| `selected` _(optional)_ | `boolean`                                    | Specifies that the MessagePrompt is selected. When one message prompt is selected, the others are disabled by default. |         |
| `...`                   | `HTMLElementProps<'button'>`                 | Props spread on button element                                                                                         |         |

---
_Source: https://npm.io/package/@lg-chat/message-prompts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._