React Chips Component : Simple & Customizable Chips

import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';
import './default.css';

export class Default extends SampleBase<{}, {}> {

    render() {
        return (
            <div className="control-section">
                <ChipListComponent id="chip-default" >
                    <ChipsDirective>
                        <ChipDirective text="Apple" cssClass="e-primary"></ChipDirective>
                        <ChipDirective text="Microsoft" cssClass="e-info"></ChipDirective>
                        <ChipDirective text="Google" cssClass="e-success"></ChipDirective>
                        <ChipDirective text="Tesla" cssClass="e-warning"></ChipDirective>
                        <ChipDirective text="Intel" cssClass="e-danger"></ChipDirective>
                        </ChipsDirective>
                </ChipListComponent>    
            </div>                   
        )
    }
}