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 | Default | Description |
---|---|---|
label: string | Text to be placed next inside the tag. | |
labelPosition: 'before' | 'after' | 'after' | Whether the label should appear after or before the icon. |
icon: node | string | Element or path used as the icon that will be placed next to the label. | |
iconBgColor: string | '#5f249f' | Background color of the icon section of the tag. |
linkHref: string | If defined, the tag will be displayed as an anchor, using this prop as "href". Component will show some visual feedback on hover. | |
newWindow: boolean | false | If true, the page is opened in a new browser tab. |
onClick: function | If defined, the tag will be displayed as a button. This function will be called when the user clicks the tag. Component will show some visual feedback on hover. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | |
size: string | 'fitContent' | Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent'). |
tabIndex: number | 0 | Value of the tabindex attribute. |