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.

Status

Status

Healthy

Figma component

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

Principles

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.

Structure

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

Properties

States

Enabled

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

Hover

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

Focus

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

Active

The active state is for when the component is selected.

Disabled

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.

Attribute

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.

Positioning

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.

Behavior

Interaction

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.