Customization in React Chips component

27 Dec 202424 minutes to read

This section explains how to customize styles, leading icons, avatar, and trailing icons in the Chip component.

Styles

The Chip component has the following predefined styles that 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 * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar">
        <ChipsDirective>
            <ChipDirective text="Primary" cssClass="e-primary"></ChipDirective>
            <ChipDirective text="Success" cssClass="e-success"></ChipDirective>
            <ChipDirective text="Info" cssClass="e-info"></ChipDirective>
            <ChipDirective text="Warning" cssClass="e-warning"></ChipDirective>
            <ChipDirective text="Danger" cssClass="e-danger"></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar">
            <ChipsDirective>
                <ChipDirective text="Primary" cssClass="e-primary"></ChipDirective>
                <ChipDirective text="Success" cssClass="e-success"></ChipDirective>
                <ChipDirective text="Info" cssClass="e-info"></ChipDirective>
                <ChipDirective text="Warning" cssClass="e-warning"></ChipDirective>
                <ChipDirective text="Danger" cssClass="e-danger"></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Leading Icon

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

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import './index.css';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar">
        <ChipsDirective>
            <ChipDirective text="Andrew" leadingIconCss='andrew'></ChipDirective>
            <ChipDirective text="Janet" leadingIconCss='janet'></ChipDirective>
            <ChipDirective text="Laura" leadingIconCss='laura'></ChipDirective>
            <ChipDirective text="Margaret" leadingIconCss='margaret'></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar">
            <ChipsDirective>
                <ChipDirective text="Andrew" leadingIconCss='andrew'></ChipDirective>
                <ChipDirective text="Janet" leadingIconCss='janet'></ChipDirective>
                <ChipDirective text="Laura" leadingIconCss='laura'></ChipDirective>
                <ChipDirective text="Margaret" leadingIconCss='margaret'></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

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

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

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

#chip-avatar .janet {
	background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Avatar

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

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import './index.css';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar">
        <ChipsDirective>
            <ChipDirective text="Andrew" avatarIconCss='andrew'></ChipDirective>
            <ChipDirective text="Janet" avatarIconCss='janet'></ChipDirective>
            <ChipDirective text="Laura" avatarIconCss='laura'></ChipDirective>
            <ChipDirective text="Margaret" avatarIconCss='margaret'></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar">
            <ChipsDirective>
                <ChipDirective text="Andrew" avatarIconCss='andrew'></ChipDirective>
                <ChipDirective text="Janet" avatarIconCss='janet'></ChipDirective>
                <ChipDirective text="Laura" avatarIconCss='laura'></ChipDirective>
                <ChipDirective text="Margaret" avatarIconCss='margaret'></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

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

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

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

#chip-avatar .janet {
	background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Avatar Content

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

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import './index.css';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar">
        <ChipsDirective>
            <ChipDirective text="Andrew" avatarText='A'></ChipDirective>
            <ChipDirective text="Janet" avatarText='J'></ChipDirective>
            <ChipDirective text="Laura" avatarText='L'></ChipDirective>
            <ChipDirective text="Margaret" avatarText='M'></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar">
            <ChipsDirective>
                <ChipDirective text="Andrew" avatarText='A'></ChipDirective>
                <ChipDirective text="Janet" avatarText='J'></ChipDirective>
                <ChipDirective text="Laura" avatarText='L'></ChipDirective>
                <ChipDirective text="Margaret" avatarText='M'></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Trailing Icon

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

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar">
        <ChipsDirective>
            <ChipDirective text="Andrew" trailingIconCss='e-dlt-btn'></ChipDirective>
            <ChipDirective text="Janet" trailingIconCss='e-dlt-btn'></ChipDirective>
            <ChipDirective text="Laura" trailingIconCss='e-dlt-btn'></ChipDirective>
            <ChipDirective text="Margaret" trailingIconCss='e-dlt-btn'></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar">
            <ChipsDirective>
                <ChipDirective text="Andrew" trailingIconCss='e-dlt-btn'></ChipDirective>
                <ChipDirective text="Janet" trailingIconCss='e-dlt-btn'></ChipDirective>
                <ChipDirective text="Laura" trailingIconCss='e-dlt-btn'></ChipDirective>
                <ChipDirective text="Margaret" trailingIconCss='e-dlt-btn'></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Outline Chip

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

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<div>
        <ChipListComponent id="chip-avatar1" cssClass="e-outline">
            <ChipsDirective>
                <ChipDirective text="Chai"></ChipDirective>
                <ChipDirective text="Chang"></ChipDirective>
                <ChipDirective text="Aniseed Syrup"></ChipDirective>
                <ChipDirective text="Ikura"></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
        <ChipListComponent id="chip-avatar2" cssClass="e-outline" enableDelete={true}>
            <ChipsDirective>
                <ChipDirective text="Andrew"></ChipDirective>
                <ChipDirective text="Janet"></ChipDirective>
                <ChipDirective text="Laura"></ChipDirective>
                <ChipDirective text="Margaret"></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <div>
            <ChipListComponent id="chip-avatar1" cssClass="e-outline">
                <ChipsDirective>
                    <ChipDirective text="Chai"></ChipDirective>
                    <ChipDirective text="Chang"></ChipDirective>
                    <ChipDirective text="Aniseed Syrup"></ChipDirective>
                    <ChipDirective text="Ikura"></ChipDirective>
                </ChipsDirective>
            </ChipListComponent>
            <ChipListComponent id="chip-avatar2" cssClass="e-outline" enableDelete={true}>
                <ChipsDirective>
                    <ChipDirective text="Andrew"></ChipDirective>
                    <ChipDirective text="Janet"></ChipDirective>
                    <ChipDirective text="Laura"></ChipDirective>
                    <ChipDirective text="Margaret"></ChipDirective>
                </ChipsDirective>
            </ChipListComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Template

The template property of the Chips component 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 * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import './index.css';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
  return (<ChipListComponent id="chip-avatar">
    <ChipsDirective>
      <ChipDirective
        leadingIconCss="trendingIcon"
        template='<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'
      ></ChipDirective>
      <ChipDirective
        leadingIconCss="cameraIcon"
        template='<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'
      ></ChipDirective>
      <ChipDirective
        leadingIconCss="trendingIcon"
        template='<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'
      ></ChipDirective>
    </ChipsDirective>
  </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
  return (
    <ChipListComponent id="chip-avatar">
      <ChipsDirective>
        <ChipDirective
          leadingIconCss="trendingIcon"
          template='<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'
        ></ChipDirective>
        <ChipDirective
          leadingIconCss="cameraIcon"
          template='<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'
        ></ChipDirective>
        <ChipDirective
          leadingIconCss="trendingIcon"
          template='<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'
        ></ChipDirective>
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}

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

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

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

#chip .e-chip .textElement {
	font-weight: 400;
	height: 14px;
	line-height: 14px;
	font-size: 10px;
	margin-right: 6px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.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='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>