Customization in EJ2 TypeScript Chips control

6 Mar 202524 minutes to read

This section explains the customization of styles, leading icons, avatars, and trailing icons in the Chip control.

Styles

The Chip control has the following predefined styles, which can be defined using the cssClass property:

Class Description
e-primary Represents a primary chip.
e-success Represents a positive chip.
e-info Represents an informative chip.
e-warning Represents a chip with caution.
e-danger Represents a negative chip. 
import { ChipList } from '@syncfusion/ej2-buttons';

new ChipList({
    chips: [{
        "text": "Apple",
        "cssClass": "e-primary"
    },
    {
        "text": "Microsoft",
        "cssClass": "e-info"
    },
    {
        "text": "Google",
        "cssClass": "e-success"
    },
    {
        "text": "Tesla",
        "cssClass": "e-warning"
    },
    {
        "text": "Intel",
        "cssClass": "e-danger"
    }
    ]
}, '#chip');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' class="element">
        <div id="chip"></div>
    </div>
    <style>
        .element {
            display: flex;
            width: 400px;
            margin: 100px auto;
            border-radius: 3px;
            justify-content: center;
        }
    </style>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}

Leading Icon

You can add and customize the leading icon of a chip using the leadingIconCss property.

import { ChipList } from '@syncfusion/ej2-buttons';

new ChipList({
    chips: [{
        "text": "Anne",
        "leadingIconCss": "andrew"
    },
    {
        "text": "Janet",
        "leadingIconCss": "janet"
    },
    {
        "text": "Laura",
        "leadingIconCss": "laura"
    },
    {
        "text": "Margaret",
        "leadingIconCss": "margaret"
    }
    ]
}, '#chip');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' class="element">
        <div id="chip"></div>
    </div>
    <style>
        .element {
            display: flex;
            width: 400px;
            margin: 100px auto;
            border-radius: 3px;
            justify-content: center;
        }

        #chip .andrew {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/andrew.png')
        }

        #chip .margaret {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
        }

        #chip .laura {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
        }

        #chip .janet {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
        }
    </style>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}

Avatar

You can add and customize the avatar of a chip using the avatarIconCss property.

import { ChipList } from '@syncfusion/ej2-buttons';

new ChipList({
    chips: [{
        "text": "Anne",
        "avatarIconCss": "andrew"
    },
    {
        "text": "Janet",
        "avatarIconCss": "janet"
    },
    {
        "text": "Laura",
        "avatarIconCss": "laura"
    },
    {
        "text": "Margaret",
        "avatarIconCss": "margaret"
    }
    ]
}, '#chip');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' class="element">
        <div id="chip"></div>
    </div>
    <style>
        .element {
            display: flex;
            width: 400px;
            margin: 100px auto;
            border-radius: 3px;
            justify-content: center;
        }

        #chip .andrew {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/andrew.png')
        }

        #chip .margaret {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
        }

        #chip .laura {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
        }

        #chip .janet {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
        }
    </style>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}

Avatar Content

You can add and customize the avatar content of a chip using the avatarText property.

import { ChipList } from '@syncfusion/ej2-buttons';

new ChipList({
    chips: [{
        "text": "Anne",
        "avatarText": "A"
    },
    {
        "text": "Janet",
        "avatarText": "J"
    },
    {
        "text": "Laura",
        "avatarText": "L"
    },
    {
        "text": "Margaret",
        "avatarText": "M"
    }
    ]
}, '#chip');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' class="element">
        <div id="chip"></div>
    </div>
    <style>
        .element {
            display: flex;
            width: 400px;
            margin: 100px auto;
            border-radius: 3px;
            justify-content: center;
        }
    </style>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}

Trailing Icon

You can add and customize the trailing icon of a chip using the trailingIconCss property.

import { ChipList } from '@syncfusion/ej2-buttons';

new ChipList({
    chips: [{
        "text": "Anne",
        "trailingIconCss": "e-dlt-btn"
    },
    {
        "text": "Janet",
        "trailingIconCss": "e-dlt-btn"
    },
    {
        "text": "Laura",
        "trailingIconCss": "e-dlt-btn"
    },
    {
        "text": "Margaret",
        "trailingIconCss": "e-dlt-btn"
    }
    ]
}, '#chip');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' class="element">
        <div id="chip"></div>
    </div>
    <style>
        .element {
            display: flex;
            width: 400px;
            margin: 100px auto;
            border-radius: 3px;
            justify-content: center;
        }
    </style>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}

Outline Chip

An outline chip has a border with a transparent background. It can be set using the cssClass property.

import { ChipList } from '@syncfusion/ej2-buttons';

new ChipList({
    chips: ['Chai', 'Chang', 'Aniseed Syrup ', 'Ikura'],
    cssClass: 'e-outline'
}, '#chip');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' class="element">
        <div id="chip"></div>
    </div>
    <style>
        .element {
            display: flex;
            width: 400px;
            margin: 100px auto;
            border-radius: 3px;
            justify-content: center;
        }
    </style>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}

Template

The template property of the Chips control allows users to fully customize the layout and design of each chip. By using the template property, users can include custom HTML elements, such as links, icons, or additional content.

import { ChipList } from '@syncfusion/ej2-buttons';

let templateData: any = [
    {
        leadingIconCss: 'trendingIcon',
        template: () => '<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'
    },
    {
        leadingIconCss: 'cameraIcon',
        template: () => '<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'
    },
    {
        leadingIconCss: 'trendingIcon',
        template: () => '<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'
    }
];

// initialize template chip
new ChipList({ chips: templateData }, '#customTemplate');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' class="element">
        <div id="customTemplate"></div>
    </div>
    <style>
        .element {
            display: flex;
            margin: 100px auto;
            border-radius: 3px;
            justify-content: center;
        }

        #customTemplate .e-chip .trendingIcon {
            margin: 4px 0 4px 6px;
            width: 16px;
            height: 16px;
            background-image: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0ibTMyIDEyIDQuNTkgNC41OS05Ljc2IDkuNzUtOC04TDQgMzMuMTcgNi44MyAzNmwxMi0xMiA4IDggMTIuNTgtMTIuNTlMNDQgMjRWMTJ6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
        }

        #customTemplate .e-chip .cameraIcon {
            margin: 4px 0 4px 6px;
            width: 16px;
            height: 16px;
            background-image: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5LDYuNUgxNy43MmwtLjMyLTFhMywzLDAsMCwwLTIuODQtMkg5LjQ0QTMsMywwLDAsMCw2LjYsNS41NWwtLjMyLDFINWEzLDMsMCwwLDAtMywzdjhhMywzLDAsMCwwLDMsM0gxOWEzLDMsMCwwLDAsMy0zdi04QTMsMywwLDAsMCwxOSw2LjVabTEsMTFhMSwxLDAsMCwxLTEsMUg1YTEsMSwwLDAsMS0xLTF2LThhMSwxLDAsMCwxLDEtMUg3YTEsMSwwLDAsMCwxLS42OGwuNTQtMS42NGExLDEsMCwwLDEsLjk1LS42OGg1LjEyYTEsMSwwLDAsMSwuOTUuNjhsLjU0LDEuNjRBMSwxLDAsMCwwLDE3LDguNWgyYTEsMSwwLDAsMSwxLDFabS04LTlhNCw0LDAsMSwwLDQsNEE0LDQsMCwwLDAsMTIsOC41Wm0wLDZhMiwyLDAsMSwxLDItMkEyLDIsMCwwLDEsMTIsMTQuNVoiLz48L3N2Zz4=");
        }

        #customTemplate .e-chip .anchorElement {
            margin: 0 4px;
            font-weight: 600;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            color: #0F6CBD;
            text-decoration: none;
        }

        #customTemplate .e-chip .textElement {
            font-weight: 400;
            height: 14px;
            line-height: 14px;
            font-size: 10px;
            margin-right: 6px;
        }
    </style>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}