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.
| Name | Type | Description | Default |
|---|---|---|---|
| label | string | Text to be placed next inside the tag. | - |
| labelPosition | 'before' | 'after' | Whether the label should appear after or before the icon. | 'after' |
| icon | string | (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_". | - |
| iconBgColor | string | Background color of the icon section of the tag. | '#5f249f' |
| linkHref | string | If 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. | - |
| newWindow | boolean | If true, the page will be opened in a new browser tab. | false |
| onClick | () => void | If 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' | Margin | Size 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' |
| tabIndex | number | Value of the tabindex attribute. | 0 |