Skip to content

Suggestion Chips

Prompts to start from, or follow-up questions after an answer.

What are we brewing today?

'use client';

import { useState } from 'react';
import { SuggestionChips } from '@brand-studio/ui';

export default function SuggestionChipsDemo() {
  const [asked, setAsked] = useState<string>();
  return (
    <div style={{ width: '100%', maxWidth: 520, display: 'grid', gap: 16, textAlign: 'center', justifyItems: 'center' }}>
      <h3 style={{ margin: 0, fontSize: 22 }}>{asked ?? 'What are we brewing today?'}</h3>
      <SuggestionChips
        key={asked}
        label={asked ? 'Follow-up questions' : 'Ways to start'}
        suggestions={asked ? ['Why that grind size?', 'What if I only have a French press?', 'Save this recipe'] : ['Dial in a new bag', 'Which beans are ready?', 'Plan this week’s roasts', 'Write tasting notes']}
        onSelect={setAsked}
      />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, SuggestionChips } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { SuggestionChips } from '@brand-studio/ui';

<SuggestionChips
  label="Follow-up questions"
  suggestions={['Why that grind size?', 'Save this recipe']}
  onSelect={ask}
/>

The chips arrive one after another. Change the component's key to play the entrance again for a new set.

Accessibility

The chips are a list of buttons named by label.
With reduced motion they show at once.

API Reference

Prop	Type	Default
`suggestions`	`string[]`	–
`onSelect?`	`((suggestion: string) => void)`	–
`label?`	`string`	`'Suggestions'`
`className?`	`string`	`''`