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 blogsComposer
Composer is a specialized text input component designed for composing messages in a chat interface.
Example
Basic Usage
A simple composer with default send button:
View code
Handling Messages
Use the onSend and onCancel props to handle user interactions:
View code
Loading State
When loading is true, the send button shows a progress indicator and can be used to cancel the operation:
View code
Custom Actions
Replace the default send button with custom left and right elements, the SendButton component is also available for customization.
View code
Size Control
Control the minimum and maximum rows for auto-resize, you can specify minRows and maxRows props to control the minimum and maximum rows for the default inputElement (which is Textarea). If you customize your own inputElement, you need to handle the minimum and maximum rows by yourself.
View code
Expanded State
By default the composer is collapsed, which place inputElement, leftElement and rightElement in the same row, it will react to user’s input and expand the composer when the input is more than 1 row. You can specify expanded prop to control the expanded state of the composer.
View code
Disabled State
Disable the entire composer when needed:
View code
Custom Color
Please use color and colorType props to customize the color of the composer.
View code
Integration with Mention
View code
Integration with Chat Interface
Here’s how Composer integrates with a complete chat interface:
View code
Relevant components
API
SendButton
| 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. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| 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> | ||
| progressCircleProps | ProgressCircleProps | ||
| radius | string | ||
| size | IconButtonSizes | small | |
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |