Tag

The Tag represents resources and global terms to identify and linked with a text section to provide to the user more context and information regarding a topic. It usually appears in the top or bottom of the section and multiple tags can be concatenated to generate a series of resources displayed with a visual hierarchy that calls the user's attention.

warning
This component will be removed from Halstack Design System in the next major release. Please start considering alternatives such as the Badge, the Button or the Chipcomponents.

Props

NameTypeDescriptionDefault
labelstringText to be placed next inside the tag.-
labelPosition'before' | 'after'Whether the label should appear after or before the icon.'after'
iconstring | (React.ReactNode & React.SVGProps <SVGSVGElement>)Material Symbol name or SVG element as the icon that will be placed next to the label. When using Material Symbols, replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol name with "filled_".-
iconBgColorstringBackground color of the icon section of the tag.'#5f249f'
linkHrefstringIf defined, the tag will be displayed as an anchor, using this prop as its href. The component will also show some visual feedback when it is hovered.-
newWindowbooleanIf true, the page will be opened in a new browser tab.false
onClick() => voidIf defined, the tag will be displayed as a button. This function will be called when the user clicks the tag. The component will show some visual feedback when hovered.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
size'small' | 'medium' | 'large' | 'fillParent' | 'fitContent'Size of the component.'fitContent'
tabIndexnumberValue of the tabindex attribute.0

Examples

Basic usage

Icons