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.

Code

Usage

Specifications

Props

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.

Examples

Basic usage

() => {
    return (
      <DxcInset space="2rem">
        <DxcTag label="Deprecated" />
      </DxcInset>
    );
  }

() => {
    return (
      <DxcInset space="2rem">
        <DxcTag label="Deprecated" />
      </DxcInset>
    );
  }

Icons

() => {
  const icon = (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcTag label="Favourite" icon={icon} />
    </DxcInset>
  );
}

() => {
  const icon = (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );

  return (
    <DxcInset space="2rem">
      <DxcTag label="Favourite" icon={icon} />
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Icons

Edit this page on GitHub

Tabs

NextText Input

Tag

Props

Examples

Basic usage

Icons

Contents