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 blogsTag
Designer doc
Tags are labels with text. It helps to enhance the visual hierarchy so that users can easily scan information. It is often used to categorise content such as as the status of users, systems or settings.
Example
Variants
Coral’s Tag has 2 variants: Contained (default) and Outlined.
View code
Sizing
There are two size using in Coral system which are Small (default) and Medium.
View code
Colors
By default, Tag is colored based on theme’s primary color. You can specify either color or colorType prop (not both please) to customize it.
View code
Icons
Tag also provides leftIcon and rightIcon. The icon size is also adjusted for medium sized tags. You can choose to add a tooltip to the icon by passing a Tooltip component to the left and right icon properties. Try hovering on the icons in the first row to see the tooltip.
View code
Tooltip
Coral’s tag allows you to specify a width props to control the tag’s width. If the space to display the tag is limited, text label of tags has to be truncated and it will provide the full text label content when user hovers over the tag.
If the tag has both icon tooltips and truncated text, then user can hover over the icons for the icon tooltips and hover over the text for the full text label.
View code
API
Tag
| Prop name | Type | Default | Description |
|---|---|---|---|
| $color | string | ||
| $radius | string | ||
| $size | TagSizes | ||
| $variant | TagVariants | ||
| $width | number | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| color | string | ||
| colorType | ColorTypes | semMod1st | Set color based on theme. If color is specified, that prop is used instead of this. |
| ellipsisTooltipProps | Omit<EllipsisTooltipProps, "children"> | ||
| leftIcon | ReactNode | Element before the label. Equivalent to element on the label with some margin. | |
| radius | number | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| size | TagSizes | small | |
| variant | TagVariants | contained | Prefers naming it as variant because type is a known button html property. |
| width | number |