Tag

Updated:

Tags are designed to display meta information on content.

Badge Decorator Tag

By providing a q2-badge in the "decorator" slot, the q2-tag component displays a badge alongside the tag contents. Decorators are designed to only display on the left side of the component.


Empty Badge

<q2-tag label="Tag with badge">
  <q2-badge slot="decorator" theme="primary"></q2-badge>
</q2-tag>

Number Badge

<q2-tag label="Tag with badge">
  <q2-badge slot="decorator" status="info" value="42"></q2-badge>
</q2-tag>

Text Badge

<q2-tag label="Tag with badge">
  <q2-badge slot="decorator" status="success" value="New"></q2-badge>
</q2-tag>

Icon Decorator Tag

By providing a q2-icon in the "decorator" slot, the q2-tag component displays an icon alongside the tag contents. Decorators are designed to only display on the left side of the component.

<q2-tag label="Tag with icon">
  <q2-icon slot="decorator" type="brand-linkedin-color"
</q2-tag>

Multiple Tags

You may provide multiple tag to display a number of possible data points.

Checking Savings Retirement Investments 
<div role="list">
  <q2-tag label="Debits" role="listitem"></q2-tag>
  <q2-tag label="Credits" active role="listitem"></q2-tag>
  <q2-tag label="Account Types" role="listitem">
    <q2-option role="menuitem" value="Checking" _no-select>
      Checking
    </q2-option>
    <q2-option role="menuitem" value="Savings" _no-select>
      Savings
    </q2-option>
    <q2-option role="menuitem" value="Retirement" _no-select>
      Retirement
    </q2-option>
    <q2-option role="menuitem" value="Investments" _no-select>
      Investments
    </q2-option>
  </q2-tag>
  <q2-tag label="Checks" role="listitem"></q2-tag>
</div>

Note: When displaying multiple q2-tag elements together, either wrap them in a <ul> or <div role="list">.

Multiple Options

By providing a list of options, the q2-tag component allows you to select an action from a dropdown.

Edit Delete Clone 
<q2-tag label="Tag with options" multiple role="listitem">
  <q2-option role="menuitem" value="edit" _no-select>
    Edit
  </q2-option>
  <q2-option role="menuitem" value="delete" _no-select>
    Delete
  </q2-option>
  <q2-option role="menuitem" value="clone" _no-select>
    Clone
  </q2-option>
</q2-tag>

Slots

The q2-tag element has one slot that can be used to insert custom content into the component.

Learn more about slots

An optional slot that supports either an Icon or Badge to be displayed with the tag content. This is not available when using Multiple Options.

Properties

The q2-tag element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

hoist

Instructs the component to use the action sheet workflow for displaying its options.

For more information, see Action Sheets.

label

The text that populates the label.

Localizable
open

Determine whether the popover is open or closed.

optionListLabel
option-list-label

Determines the label that is applied to the option list for accessibility purposes.

popoverAlignment
popover-alignment

Aligns the popover dropdown to the left or right side of the input field.

popoverDirection
popover-direction

Force the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.

popoverMaxHeight
popover-max-height

Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.

theme

The color of the element.

Events

The q2-tag element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

click

Emitted when a provided option is clicked.

Requires at least one option to be provided.

Event Detail Type signature

{ value: string; }

Methods

The q2-tag element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

closePopover

Emulates clicking the tag to close the popover when options are provided and the popover is open.

Type signature

closePopover() => Promise<void>

openPopover

Emulates clicking the tag to open the popover when options are provided and the popover is closed.

Type signature

openPopover() => Promise<void>

selectOption

Emulates selecting an option matching the passed value.

If the popover is closed, this will open it before selecting the option.

If there are not options, or the passed value does not match any option's value, this method does nothing.

Type signature

selectOption(value: any) => Promise<void>

Release Notes

Use standard color instead of lighter variant

Initial Release

Decorator slot support

The following CSS variables are available to override the default theme styles of the q2-tagcomponent.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!

  • q2-icon

    • There is 1 frequently asked question related to this page.