Chip

<tpg-chip></tpg-chip>

Chips provide the user with an at-glance view of their input, selections, and data point they interacted with.

They can also delete the data point as well as acting as a shortcut to its location.

When in use, they will be displayed in a single-lined, array of items. If the line is longer than the container, it will be possible to swipe the chips horizontally.

Examples

Component

Chip supports an option slot called closing-button. This is used if the chip should be able to be removed. Insert a quaternary-button

Vanilla JS

      <tpg-chip label="Text"></tpg-chip>
      <tpg-chip label="Text" leading-icon-template={tpgIconPlaceholderCustom}></tpg-chip>
      <tpg-chip label="Text" trailing-icon-template={tpgIconPlaceholderCustom}></tpg-chip>
      <tpg-chip label="Text">
        <tpg-quaternary-button
          size="x-small"
          slot="closing-button"
          icon-template={tpgIconClose}
        ></tpg-quaternary-button>
      </tpg-chip>
      <tpg-chip label="Text" leading-icon-template={tpgIconPlaceholderCustom}>
        <tpg-quaternary-button
          size="x-small"
          slot="closing-button"
          icon-template={tpgIconClose}
        ></tpg-quaternary-button>
      </tpg-chip>
      <tpg-chip label="Text" leading-icon-template={tpgIconPlaceholderCustom} disabled>
        <tpg-quaternary-button
          size="x-small"
          slot="closing-button"
          disabled
          icon-template={tpgIconClose}
        ></tpg-quaternary-button>
      </tpg-chip>

React

    <tpg-chip label="Text"></tpg-chip>
    <tpg-chip label="Text" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-chip>
    <tpg-chip label="Text" trailingIconTemplate={tpgIconPlaceholderCustom}></tpg-chip>
    <tpg-chip label="Text">
      <tpg-quaternary-button
        size="x-small"
        slot="closing-button"
        iconTemplate={tpgIconClose}
      ></tpg-quaternary-button>
    </tpg-chip>
    <tpg-chip label="Text" leadingIconTemplate={tpgIconPlaceholderCustom}>
      <tpg-quaternary-button
        size="x-small"
        slot="closing-button"
        iconTemplate={tpgIconClose}
      ></tpg-quaternary-button>
    </tpg-chip>
    <tpg-chip label="Text" leadingIconTemplate={tpgIconPlaceholderCustom} disabled>
      <tpg-quaternary-button
        size="x-small"
        slot="closing-button"
        disabled
        iconTemplate={tpgIconClose}
      ></tpg-quaternary-button>
    </tpg-chip>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	Label to be displayed inside the chip	string	''
disabled	disabled	Variable that disables the button	boolean	false
leading-icon-template	leadingIconTemplate	Leading icon name or identifier from IconConstant to appear before the text.	IconConstant | ''	''
trailing-icon-template	trailingIconTemplate	Trailing icon name or identifier from IconConstant to appear after the text.	IconConstant | ''	''

Events

Event name	Reactjs attribute	Description
tpg-click	ontpg-click	Event emitted when the button is clicked

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
closing-button	Slot for inserting closing button

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox