Chat launcher
ChatLauncher is the Ask Nuri button: a compact pill with Nuri's head and the words, which opens the AI tutor. Nuri's head is alive: it blinks and its eyes follow the pointer around the page.
Beta until the hover and focus styles (code-only) are confirmed by design. The pill itself follows Figma.
Preview
The launcher as it comes: Nuri's head and 'Ask Nuri'. Point at it, or tab to it, to see it react.
<ChatLauncher onClick={openTutor} />Installation
Availability
@nuton/ui and @nuton/tokens are private workspace packages and aren't published yet (D4, D12). Inside the Nuton monorepo, add them as workspace dependencies.
pnpm add @nuton/ui @nuton/tokens @remixicon/reactnpm install @nuton/ui @nuton/tokens @remixicon/reactyarn add @nuton/ui @nuton/tokens @remixicon/reactimport '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'Usage
import { ChatLauncher } from '@nuton/ui'
{tutorOpen ? (
<Tutor onClose={() => setTutorOpen(false)} />
) : (
<ChatLauncher aria-expanded={false} onClick={() => setTutorOpen(true)} />
)}- Show it while the chat is closed, at the bottom right on the web and at the bottom centre on a tablet or phone.
ChatDockdoes the placement and turns the pill into the panel and back. - The words are the button's name, so there is nothing to label. Change them with
label. - The face is Nuri's head by default. Pass
avataronly to show something else. - Set
aria-expandedso assistive technology knows it opens a panel.
Variants and sizes
One look and one size.
Sizes
44 tall and 121 wide with the default words. Padding 16 at each side, Nuri's head 21 × 20, then the label in Label/Small. White, 1px Stroke/Soft-200, regular-shadow/x-small.
<ChatLauncher label="Ask the tutor" /><ChatLauncher avatar={<img src="/nuri/nuri-avatar.svg" alt="" />} />States and interactions
Composition examples
In Learner → Lesson the launcher is the closed state of the AI tutor: pressing it grows the pill into the chat panel (a side panel on the web, a sheet from the bottom centre on a tablet or phone), and closing the panel shrinks it back. See Chat for the panel and ChatDock.
API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | 'Ask Nuri' | The words on the button. They are its accessible name. |
avatar | ReactNode | — | The face. Default is Nuri's head (alive). Pass an image or mark to replace it. Decorative. |
attentive | boolean | true | Nuri's eyes follow the pointer anywhere on the page. Off, the head stays still. No effect on a custom avatar. |
…rest | ButtonHTMLAttributes | — | Any other button attribute, such as onClick or aria-expanded. Default type is "button". |
Accessibility
Keyboard
| Key | Behaviour |
|---|---|
| Tab | Moves focus to the launcher. |
| Enter / Space | Presses it. |
Screen readers
A button named by its words ("Ask Nuri"). Nuri's head and the arrow are hidden from assistive technology.
Focus
The standard ring with a 2px offset, drawn around the whole pill, and the same reaction as hover.
Contrast and colour
The label and the pill use the design system's text and surface tokens, so they follow light and dark themes. The state is never shown by colour alone: hover and focus also move the pill and the arrow.
Motion
The lift, the arrow and the head tilt are removed with reduced motion, and Nuri's eyes stop following the pointer.
Touch and pointer
44px tall, at the minimum target size.
You must: make the button open the panel it stands for, and set aria-expanded.
Figma mapping
"Ask Nuri" 4707:183711: 121 × 44, padding 16, head 21 × 20, label Label/Small, Bg/White, Stroke/Soft-200, regular-shadow/x-small. The Figma frame has a hidden arrow icon; it is the hover state here. Recorded as C126.
Guidelines and related components
Use Chat launcher for
- Opening the AI tutor
Don't use Chat launcher for
- Ordinary actions (use Button)
- Opening something that is not a chat