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>) | Element or path used as the icon that will be placed next to the label. | - |
| 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 |