Chips

The TkChip component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way. Chips can contain entities such as an avatar, text or an icon, optionally having a pointer too.

React

import { TkChips } from '@takeoff-ui/react'

Vue

import { TkChips } from '@takeoff-ui/vue'

Angular

import { TkChips } from '@takeoff-ui/angular'

Variant

The variant of the chips for styling.

View Code

React

<TkChips variant="primary" label="primary" removable />
<TkChips variant="secondary" label="secondary" removable />
<TkChips variant="neutral" label="neutral" removable />
<TkChips variant="info" label="info" removable />
<TkChips variant="warning" label="warning" removable />
<TkChips variant="success" label="success" removable />
<TkChips variant="danger" label="danger" removable />
<TkChips variant="verified" label="verified" removable />

Vue

<TkChips variant="primary" label="primary" removable/>
<TkChips variant="secondary" label="secondary" removable />
<TkChips variant="neutral" label="neutral" removable/>
<TkChips variant="info" label="info" removable/>
<TkChips variant="warning" label="warning" removable/>
<TkChips variant="success" label="success" removable/>
<TkChips variant="danger" label="danger" removable/>
<TkChips variant="verified" label="verified" removable/>

Angular

<tk-chips variant="primary" label="primary" removable />
<tk-chips variant="secondary" label="secondary" removable />
<tk-chips variant="neutral" label="neutral" removable />
<tk-chips variant="info" label="info" removable />
<tk-chips variant="warning" label="warning" removable />
<tk-chips variant="success" label="success" removable />
<tk-chips variant="danger" label="danger" removable />
<tk-chips variant="verified" label="verified" removable />

Type

This field specifies the design type of the component. "filled", "filledlight", "outlined" designs are available

View Code

React

<TkChips variant="primary" type="filled" label="primary" />
<TkChips variant="primary" type="filledlight" label="primary" />
<TkChips variant="primary" type="outlined" label="primary" />

Vue

<TkChips variant="primary" type="filled" label="primary" />
<TkChips variant="primary" type="filledlight" label="primary" />
<TkChips variant="primary" type="outlined" label="primary" />

Angular

<tk-chips variant="primary" type="filled" label="primary" />
<tk-chips variant="primary" type="filledlight" label="primary" />
<tk-chips variant="primary" type="outlined" label="primary" />

Size

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code

React

<TkChips variant="primary" size="small" label="primary" removable />
<TkChips variant="primary" size="base" label="primary" removable />
<TkChips variant="primary" size="large" label="primary" removable />

Vue

<TkChips variant="primary" size="small" label="primary" removable />
<TkChips variant="primary" size="base" label="primary" removable />
<TkChips variant="primary" size="large" label="primary" removable />

Angular

<tk-chips variant="primary" size="small" label="primary" removable />
<tk-chips variant="primary" size="base" label="primary" removable />
<tk-chips variant="primary" size="large" label="primary" removable />

Icon

It can be used with icons. You should use Material Symbols icons.

View Code

React

<TkChips
  variant="primary"
  size="large"
  icon="flight"
  label="primary"
  removable
/>

Vue

<TkChips
  variant="primary"
  size="large"
  icon="flight"
  label="primary"
  removable
/>

Angular

<tk-chips
  variant="primary"
  size="large"
  icon="flight"
  label="primary"
  removable
/>

API

Props

Name	Type	Default	Description
	boolean	true	Determines whether the chip automatically removes itself when the close button is clicked.
	boolean	false	The disabled status.
	IIconOptions, string	null	Specifies a material icon name to be displayed.
	string	null	The label to display inside the chip.
	boolean	false	This property determines whether the chip component is removable.
	"base", "large", "small"	'base'	Sets size for the component.
	"avatar", "filled", "filledlight", "outlined"	'filled'	This field specifies the design type of the component.
	any	null	The value of the chips
	"danger", "info", "neutral", "primary", "secondary", "success", "verified", "warning"	'primary'	The variant of the chip for styling.

Events

Name	Description
tk-remove	When an element is deleted, it is triggered. It returns the label.

Interfaces

interface IChipOptions {
  label?: string;
  icon?: string | IIconOptions;
  type?: 'filled' | 'filledlight' | 'outlined' | 'avatar';
  size?: 'large' | 'base' | 'small';
  variant?: 'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'danger' | 'warning' | 'verified';
}