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 blogsBubble
Bubble component is designed for chat-like interfaces, displaying messages with avatars and optional actions.
Example
Basic Usage
A simple bubble with avatar and message content:
View code
Alignment
Bubbles can be aligned to start (default) or end of the container, commonly used to differentiate between different users in a chat:
View code
Variant & ColorType
Bubbles outlook can be adjusted by variant and colorType props.
View code
Loading State
When loading is true, the bubble displays a spinner instead of the message content:
View code
Footer
Add interactive or informative elements like actionElement or message in the footer area, render corresponding status icon by passing the status prop
View code
Maximum Content Width
Control how much of the container width the message can occupy, default value is 75 in percentage.
View code
Loading state
View code
Hidden Avatar for Consecutive Messages
Use hidden avatars for consecutive messages from the same user by setting hidden prop to true:
View code
Avatar Placement
Bubbles can be aligned to top (default) or middle of the container, commonly used to differentiate between different users in a chat:
View code
Auto-scroll to Loading Bubble
BubbleList can automatically scroll to loading bubbles by using the scrollToLoading method attached to the ref.
The scrollToLoading method accepts an object as optional configuration
View code
Relevant components
API
Bubble
| Prop name | Type | Default | Description |
|---|---|---|---|
| actionElement | ReactNode | ||
| actionProps | HTMLAttributes<HTMLDivElement> | ||
| alignment | BubbleAlignments | start | |
| avatar | ReactNode | ||
| avatarPlacement | AvatarPlacements | middle | |
| color | string | ||
| colorType | ColorTypes | ||
| contentProps | HTMLAttributes<HTMLDivElement> | ||
| footerProps | HTMLAttributes<HTMLDivElement> | ||
| maxContentWidth | number | 75 | The maximum width of the message container in percentage of the row width Default is 75(%) |
| message | ReactNode | ||
| messageProps | TextProps | ||
| radius | number | ||
| renderStatusIcon | (status: MessageStatus) => ReactNode | ||
| status | MessageStatus | ||
| variant | BubbleVariants | contained |
BubbleMarkdown
| Prop name | Type | Default | Description |
|---|---|---|---|
| allowElement | AllowElement | Filter elements (optional); allowedElements / disallowedElements is used first. | |
| allowedElements | readonly string[] | Tag names to allow (default: all tag names); cannot combine w/ disallowedElements. | |
| children | string | Markdown. | |
| components | Components | Map tag names to components. | |
| disallowedElements | readonly string[] | Tag names to disallow (default: []); cannot combine w/ allowedElements. | |
| rehypePlugins | PluggableList | List of rehype plugins to use. | |
| remarkPlugins | PluggableList | List of remark plugins to use. | |
| remarkRehypeOptions | Readonly<Options> | Options to pass through to remark-rehype. | |
| skipHtml | boolean | Ignore HTML in markdown completely (default: false). | |
| unwrapDisallowed | boolean | Extract (unwrap) what’s in disallowed elements (default: false); normally when say strong is not allowed, it and it’s children are dropped, with unwrapDisallowed the element itself is replaced by its children. | |
| urlTransform | UrlTransform | Change URLs (default: defaultUrlTransform) |
Loading
ResetScrollButton
| 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> | ||
| radius | string | ||
| scrollOptions | ScrollToOptions | ||
| size | IconButtonSizes | ||
| springConfig | Partial<AnimationConfig> | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |