Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsPrompt
Prompt component is a specialized variant of Button component designed for prompt buttons in Chat interfaces.
Example
Basic Usage
A simple prompt button with text, you can use variant prop to switch between Contained and Outlined variants:
Prompt with Contained variant
Prompt with Outlined variant
View code
With Left Icon
Replace the default left icon with a custom one:
Learn more about our bot
View code
API
Prompt
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| color | string | ||
| colorType | ColorTypes | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| leftIcon | ReactNode | <AiSparkleFIcon colorType={ColorTypes.AccPri1st} /> | Element before the label. Equivalent to element on the label with some margin. |
| leftIconContainerProps | HTMLAttributes<HTMLDivElement> | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | number | ||
| variant | PromptVariants | contained |