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 blogsLinkButton
Designer doc
LinkButton helps navigate to url provided.
Example
Basic Usage
View code
Sizing
There are two size using in Coral system which are Small (default) and Medium.
Variants
There are two variants of LinkButton, standalone(default) only has the underline when hovered, inline has it all the time.
Icons
Icons can be added to the left and right using the rightIcon and leftIcon props. The default size of the icon is determined by the size prop of the LinkButton. The iconShownOnHover prop is used to control if the icon is always visible or is only visible when the user hovers on the LinkButton.
View code
Visited States
The showVisitedState prop is used to enable the differentiation in color for visited LinkButtons. The color also extends to the icons added by the leftIcon & rightIcon props.
View code
References
API
LinkButton
| 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 | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | ||
| iconShownOnHover | boolean | ||
| leftIcon | ReactNode | ||
| rightIcon | ReactNode | ||
| showVisitedState | boolean | ||
| size | string | small | |
| variant | string | standalone |