Tag

Tags are used to highlight the status of an item or make it easier to recognize certain items in data-dense content. Be wary of using multiple tags on one item, as it could cause visual noise.

React

Is new design vision part implemented using new tokens?

Update required

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { Tag } from '@optimus-web/core';
                                                        
                                                        <Tag variant="primary">
                                                          Tag
                                                        </Tag>
                                                        
                                                            

API

Name

Description

Type

Default

children?

Defines the tag content

ReactNode

undefined

variant?

Defines the variant for the tag

TagVariant

basicBold

outline?

Enables the outline style

boolean

false

leadingIcon?

Defines the icon before the text of the tag

IconName

undefined

trailingIcon?

Defines the icon after the text of the tag

IconName

undefined

ref?

Adds your React.Ref to the tag

React.Ref<HTMLDivElement>

undefined