Tag interactive

Tag interactive is used to allow users to apply and manage dynamic data, grouping and filtering them based on specific criteria in lists and reports.




Figma component

Includes a link to a Figma component that has been imported to Supernova


Use when

  1. referring to items or content that have informational and dynamic content.
  2. allowing users to perform actions such as filtering or sorting information.
  3. set categories for related content.

Don't use when

  1. displaying the item if content is a visual signifier. Instead use tag-semantic.


Default tag-interactive (above), tag-interactive with action button (below)

Default tag-interactive (above), tag-interactive with action button (below)

  1. Container
  2. Tag label
  3. Action (remove) button




The enabled type is used to indicate as it is default.


While the user hovers over the tag, the background will change.


When in the focused state (while on the tab key), pressing enter will apply the relevant action contained within the tag.


The active state is for when the component is selected.


When the tag is disabled, the user is unable to make any changes to it, such as removing it from filtering arrays or changing its label.


Action button (boolean)

The action button is used to remove the tag from where it is currently applied, when the user is allowed to do so.


When the interactive tag will be used in an input field, the field can contain multiple interactive tags horizontally. If you want to use the interactive tag in the overflow menu, use tag item as a single line item property.



Interactive tag can be created on input fields and can be transformed to tag. These tags can be also editable on an input field.

The tags are preferred to remove by using delete key or hitting the remove icon when using the component on input field.

Also Interactive tag's label should carry one word. If the text character reaches to max inner-padding with its container truncate the text.