added compoenent source files

2020-06-18 15:43:32 +05:30 · 2020-06-18 15:43:32 +05:30 · 203d048fbb
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@ -0,0 +1,55 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: [ master ]
+    types: [opened, closed, edited, synchronize]
+#     types: [opened, edited, closed, reopened]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x]
+
+    steps:
+    - uses: actions/checkout@v2
+      with:
+          fetch-depth: 2
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    
+    - name: set environment variables
+      uses: allenevans/set-env@v1.0.0
+      with:
+          MY_ENV_VAR: 'my value'
+          GIT_USER: ${{ secrets.USER }}
+          GIT_TOKEN: ${{ secrets.TOKEN }}
+          GIT_MAIL: ${{ secrets.USER_MAIL }}
+          IS_TEMP: github.event.pull_request.merged
+            
+    - name: Install
+      run: npm i
+      
+    - run: npm run test
+    
+    - name: Get changed files
+      run: |
+          git diff --name-only HEAD^ HEAD
+        
+    - name: Publish
+      run: npm run publish
+      env:
+         GIT_USER: ${{ secrets.USER }}
+         GIT_TOKEN: ${{ secrets.TOKEN }}
+         check: 'hello'
+      if: github.event.pull_request.merged == true
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+node_modules
+.vscode
+yarn.lock
+package-lock.json
+ej2-docs
+cireports
--- a/.markdownlint.json
+++ b/.markdownlint.json
@ -0,0 +1,43 @@
+{    
+    "header-increment": true,
+    "first-header-h1": true,
+    "header-style": { "style": "atx" },
+    "ul-style": { "style": "asterisk" },
+    "list-indent": true,
+    "ul-start-left": true,
+    "ul-indent": { "indent": 4 },
+    "no-trailing-spaces": true,
+    "no-hard-tabs": true,
+    "no-reversed-links": true,
+    "no-multiple-blanks": { "maximum" : 1 },
+    "line-length": false,
+    "commands-show-output": true,
+    "no-missing-space-atx": true,
+    "no-multiple-space-atx": true,
+    "no-missing-space-closed-atx": true,
+    "no-multiple-space-closed-atx": true,
+    "blanks-around-headers": true,
+    "header-start-left": true,
+    "no-duplicate-header": {"siblings_only": true},
+    "single-h1": true,
+    "no-trailing-punctuation": true,
+    "no-multiple-space-blockquote": true,
+    "no-blanks-blockquote": true,
+    "ol-prefix": { "style" : "ordered" },
+    "list-marker-space": true,
+    "blanks-around-fences": true,
+    "blanks-around-lists": false,
+    "no-inline-html": {
+        "allowed_elements": ["br", "kbd", "span", "div", "b"]
+    },
+    "no-bare-urls": true,
+    "hr-style": { "style" : "----"},
+    "no-emphasis-as-header": true,
+    "no-space-in-emphasis": true,
+    "no-space-in-code": true,
+    "no-space-in-links": true,
+    "fenced-code-language": true,
+    "first-line-h1": false,
+    "no-empty-links": true,
+    "required-headers": true
+}
--- a/36
+++ b/36
@ -0,0 +1,36 @@
+#!groovy
+
+node('EJ2Doc') {
+    try {
+        deleteDir()
+
+        stage('Import') {
+            git url: 'https://gitlab.syncfusion.com/essential-studio/ej2-groovy-scripts.git', branch: 'master', credentialsId: env.JENKINS_CREDENTIAL_ID
+            shared = load 'src/shared.groovy'
+        }
+
+        stage('Checkout') {
+            checkout scm
+            shared.getProjectDetails()
+            shared.gitlabCommitStatus('running')
+        }
+
+        stage('Install') {
+            shared.runShell('npm install')
+        }
+       
+        stage('Test') {
+            shared.test()
+        }
+
+        stage('Publish') {
+            shared.publish()
+        }
+
+        shared.gitlabCommitStatus('success')
+        deleteDir()
+    }
+    catch(Exception e) {
+        shared.throwError(e)
+    }
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+Repository for EJ2 Common Documentation for ASP .NET Core Razor Components.
--- a/config.json
+++ b/config.json
@ -0,0 +1,7 @@
+{
+    "platform": "razor",
+    "customNames": [],
+    "componentsName": {
+        "common": "Common"
+    }
+}
--- a/example.xml
+++ b/example.xml
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<testsuites name="Unit Tests" tests="1" failures="1" time="1.3">
+  <testsuite name="example" errors="0" failures="1" skipped="0" timestamp="2020-02-17T01:23:12" time="0.641" tests="1">
+    <testcase classname="example" name="does not fail" time="0.003">
+      <failure>Error: expect(received).toBe(expected) // Object.is equality
+
+Expected: true
+Received: false
+    at Object.&lt;anonymous&gt; (/github/workspace/example/index.spec.js:3:19)
+    at Object.asyncJestTest (/github/workspace/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
+    at /github/workspace/node_modules/jest-jasmine2/build/queueRunner.js:43:12
+    at new Promise (&lt;anonymous&gt;)
+    at mapper (/github/workspace/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
+    at /github/workspace/node_modules/jest-jasmine2/build/queueRunner.js:73:41</failure>
+    </testcase>
+  </testsuite>
+</testsuites>
--- a/gulpfile.js
+++ b/gulpfile.js
@ -0,0 +1,104 @@
+var fs = require('fs');
+var gulp = require('gulp');
+var glob = require('glob');
+var shelljs = require('shelljs');
+
+var components;
+var compPaths = glob.sync(`./src/**/`, { silent: true, ignore: [`./src/base/`, `./src/`, './src/common/', './src/getting-started/'] });
+
+var branch = 'master';
+var user = process.env.GIT_USER;
+var token = process.env.GIT_TOKEN;
+var user_mail = process.env.GIT_MAIL;
+var is_temp = process.env.IS_TEMP;
+/**
+ * Source shipping to gitlap
+ */
+gulp.task('ship-to-gitlap', function (done) {
+    console.log('---check----' + user_mail);
+    console.log('---user---' + user);
+    
+    shelljs.exec(`git config --global user.email "${user_mail}"`);
+    shelljs.exec(`git config --global user.name "${user}"`);
+    
+    var changes = shelljs.exec(`git diff --name-only HEAD^ HEAD`);
+    console.log('--changes----' + changes);
+    
+    var changedFileNames = changes.stdout.split('\n');
+    console.log('--changedFileNames----' + changedFileNames);
+    
+    console.log('--is_temp----' + is_temp);
+    
+    var cloneRepos = [];
+    for (var i = 0; i < changedFileNames.length; i++) {
+        var curentRootRepo = changedFileNames[i].split('/')[1];
+//         if(curentRootRepo !='workflows'){
+//             return
+//            }
+        if (curentRootRepo != undefined && curentRootRepo !='workflows') {
+            cloneRepos.push(curentRootRepo);
+        }
+    }
+    
+    console.log('--cloneRepos----' + cloneRepos);    
+    
+    for (var j = 0; j < cloneRepos.length; j++) {
+        var gitPath = 'https://' + user + ':' + token + `@gitlab.syncfusion.com/essential-studio/ej2-${cloneRepos[j]}-razor-docs`;
+        console.log('Clone has been started...!');
+        var clone = shelljs.exec('git clone ' + gitPath + ' -b ' + branch + ' ' + `./gitlapRepo/ej2-${cloneRepos[j]}-razor-docs`, {
+            silent: true
+        });
+        if (clone.code !== 0) { 
+            done();
+            return;
+        } else {
+            console.log('Clone has been completed...!');
+            shelljs.cp('-rf', `./src/${cloneRepos[j]}/*`, `./gitlapRepo/ej2-${cloneRepos[j]}-razor-docs/src`);
+            shelljs.cd(`./gitlapRepo/ej2-${cloneRepos[j]}-razor-docs`);
+            shelljs.exec('git add .');
+            shelljs.exec('git pull');
+            shelljs.exec('git commit -m \"ci-skip(EJ2-000): source updation from github repo [ci skip]\" --no-verify');
+            shelljs.exec('git push');
+            shelljs.cd('../../')
+        }
+    }
+})
+
+/**
+ * Lint md files in src location
+ */
+gulp.task('lint', function (done) {
+    var markdownlint = require('markdownlint');
+    components = controlsList();
+    var options = {
+        files: glob.sync('./src/' + components + '/*.md', { ignore: ['./src/**/api*.md', './src/summary.md', './src/release-notes/*.md'] }),
+        config: require('./.markdownlint.json')
+    };
+    markdownlint(options, function (result, err) {
+        if (err && err.toString().length) {
+            console.error(err.toString());
+            done();
+            process.exit(1);
+        } else {
+            console.log('\n*** Markdown Lint Succeeded ***\n');
+            done();
+        }
+    });
+});
+
+// Controls List
+function controlsList() {
+    var controls = '**';
+    if (true) {
+        var ret = '';
+        for (var comp of compPaths) {
+            ret += comp.replace(/.\/src\//g, '') + '**/,';
+        }
+        return '{' + ret + '}';
+    }
+    else if (fs.existsSync('./controlsList.txt')) {
+        controls = fs.readFileSync('./controlsList.txt', 'utf8');
+        controls = '{' + controls + ',}';
+    }
+    return controls;
+}
--- a/mapping.json
+++ b/mapping.json
@ -0,0 +1 @@
+{}
--- a/package.json
+++ b/package.json
@ -0,0 +1,47 @@
+{
+  "name": "@syncfusion/ej2-razor-docs",
+  "version": "1.0.0",
+  "description": "Syncfusion TypeScript common documentation",
+  "author": "Syncfusion Inc.",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "core-js": "^2.5.7",
+    "cheerio": "^1.0.0-rc.2",
+    "gulp": "^3.9.1",
+    "gulp-csslint": "^1.0.1",
+    "gulp-csslint-report": "^2.0.0",
+    "gulp-gzip": "^1.4.2",
+    "lodash": "^4.17.11",
+    "markdownlint": "^0.11.0",
+    "markdown-link-extractor": "^1.2.0",
+    "markdown-spellcheck": "^1.3.1",
+    "prismjs": "^1.15.0",
+    "require-dir": "^1.0.0",
+    "shelljs": "^0.8.2",
+    "styled-components": "^3.4.9",
+    "typeface-merriweather": "0.0.43",
+    "typeface-montserrat": "0.0.43",
+    "typo-js": "^1.0.3",
+    "typescript": "^2.6.2",
+    "typography": "^0.16.17",
+    "typography-theme-wordpress-2016": "^0.15.10",
+    "webpack": "4.28.4",
+     "terser": "3.14.1"
+  },
+  "devDependencies": {
+    "eslint": "^4.19.1",
+    "eslint-plugin-react": "^7.11.1",
+    "gh-pages": "^1.2.0",
+    "json-loader": "^0.5.7",
+    "prettier": "^1.14.2"
+  },
+  "config": {
+    "ghooks": {
+      "pre-commit": "gulp test"
+    }
+  },
+  "scripts": {
+    "test": "gulp lint",
+    "publish": "gulp ship-to-gitlap"
+  }
+}
--- a/src/buttons/button-group/accessibility.md
+++ b/src/buttons/button-group/accessibility.md
@ -0,0 +1,103 @@
+---
+title: "ButtonGroup Accessibility"
+component: "ButtonGroup"
+description: "ButtonGroup control has accessibility support to help access the features via keyboard, on-screen readers, or other assistive technology devices."
+---
+
+# Accessibility
+
+The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies.
+ButtonGroup provides built-in compliance with `WAI-ARIA` specifications. It helps the people with disabilities by providing information about the widget for assistive
+technology in the screen readers. ButtonGroup component contains the `group` role.
+
+| Properties | Functionality |
+| ------------ | ----------------------- |
+| role | Indicates the `group` for the container that holds two or more buttons. |
+
+## Keyboard interaction
+
+### Normal behavior
+
+<!-- markdownlint-disable MD033 -->
+<table>
+<tr>
+<td><b>Keyboard shortcuts</b></td>
+<td><b>Actions</b></td>
+</tr>
+<tr>
+<td><kbd>Tab</kbd></td>
+<td>Focuses the next button in the ButtonGroup.</td>
+</tr>
+<tr>
+<td><kbd>Enter/Space</kbd></td>
+<td>Activates the focused button in the ButtonGroup.</td>
+</tr>
+</table>
+
+### Checkbox type behavior
+
+<!-- markdownlint-disable MD033 -->
+<table>
+<tr>
+<td><b>Keyboard shortcuts</b></td>
+<td><b>Actions</b></td>
+</tr>
+<tr>
+<td><kbd>Tab</kbd></td>
+<td>Focuses the next button in the ButtonGroup.</td>
+</tr>
+<tr>
+<td><kbd>Space</kbd></td>
+<td>Activates the focused button in the ButtonGroup.</td>
+</tr>
+</table>
+
+### Radiobutton type behavior
+
+<!-- markdownlint-disable MD033 -->
+<table>
+<tr>
+<td><b>Keyboard shortcuts</b></td>
+<td><b>Actions</b></td>
+</tr>
+<tr>
+<td><kbd>Tab</kbd></td>
+<td>Focuses the active button in the ButtonGroup.</td>
+</tr>
+<tr>
+<td><kbd>Arrow Keys</kbd></td>
+<td>Activates next/previous button in the ButtonGroup.</td>
+</tr>
+</table>
+
+`Index.razor`
+
+```csharp
+  <h5>Normal behavior</h5>
+   <div class='e-btn-group e-outline'>
+    <EjsButton ID="html" CssClass='e-outline' Content="HTML"></EjsButton>
+    <EjsButton ID="css" CssClass='e-outline' Content="CSS"></EjsButton>
+    <EjsButton ID="javascript" CssClass='e-outline' Content="Javascript"></EjsButton>
+</div>
+
+<h5>Radiobutton type behavior</h5>
+<div class='e-btn-group'>
+    <input type="radio" Id="radioleft" name="align" value="left" />
+    <label class="e-btn" for="radioleft">Left</label>
+    <input type="radio" Id="radiomIddle" name="align" value="mIddle" />
+    <label class="e-btn" for="radiomIddle">Center</label>
+    <input type="radio" Id="radioright" name="align" value="right" />
+    <label class="e-btn" for="radioright">Right</label>
+</div>
+
+<h5>Checkbox type behavior</h5>
+ <div class='e-btn-group'>
+    <input type="checkbox" Id="checkbold" name="font" value="bold" />
+    <label class="e-btn" for="checkbold">Bold</label>
+    <input type="checkbox" Id="checkitalic" name="font" value="italic" />
+    <label class="e-btn" for="checkitalic">Italic</label>
+    <input type="checkbox" Id="checkline" name="font" value="underline" />
+    <label class="e-btn" for="checkline">Underline</label>
+</div>
+
+  ```
--- a/src/buttons/button-group/getting-started.md
+++ b/src/buttons/button-group/getting-started.md
@ -0,0 +1,66 @@
+---
+title: "Getting Started"
+component: "ButtonGroup"
+description: "This section helps to learn how to create the ButtonGroup in ASP.NET Core Razor application with its basic features in step-by-step procedure."
+---
+
+<!-- markdownlint-disable MD024 -->
+
+# Getting Started with Essential JS 2 for ASP.NET Core Razor ButtonGroup Component in Visual Studio 2019
+
+This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor ButtonGroup Component web application using the [Visual Studio 2019](https://visualstudio.microsoft.com/vs/preview/).
+
+## Prerequisites
+
+The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the [.NET Core Razor components documentation website](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio).
+
+* [Visual Studio 2019 Preview](https://visualstudio.microsoft.com/vs/preview/) with the ASP.NET and web development workload
+* [.NET Core SDK 3.0 Preview](https://dotnet.microsoft.com/download/dotnet-core/3.0)
+
+## Create a Razor Component application from VS 2019
+
+1. Choose **File > New > Project...** in the Visual Studio menu bar.
+
+    ![new project in aspnetcore razor](images/new-project.png)
+
+2. Make sure **.NET Core** and **ASP.NET Core 3.0** are selected at the top.
+
+    ![select framework](images/razor-components-template.png)
+
+3. Choose the **Razor Components** template and change the application name, and then click **OK**.
+
+## Importing Essential JS 2 Razor components in the application
+
+1. Now, add the **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.
+
+    ![nuget explorer](images/nuget-explorer.png)
+
+2. Search the **Syncfusion.EJ2.AspNet.Core.RazorComponents** keyword in the Browse tab and install **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package in the application.
+
+    ![select nuget](images/select-nuget.png)
+
+3. The Essential JS 2 package will be included in the project, after the installation process is completed.
+
+4. Open **~/_ViewImports.cshtml** file and import the `Syncfusion.EJ2.RazorComponents`.
+
+    ```cshtml
+    @addTagHelper *, Syncfusion.EJ2.RazorComponents
+    ```
+
+5. Add the client-side resources through CDN or local npm package in the `<head>` element of the **~/wwwroot/index.html** page.
+
+    ![import cdn](images/import-cdn.png)
+
+6. Now, add the Syncfusion Essential JS 2 ButtonGroup component in any web page (cshtml) in the `Pages` folder. For example, the ButtonGroup component is added in the **~/Pages/Index.cshtml** page.
+
+    ```cshtml
+    <div id="web" class="e-btn-group">
+        <EjsButton ID='html'>HTML</EjsButton>
+        <EjsButton ID='css'>CSS</EjsButton>
+        <EjsButton ID='js'>Javascript</EjsButton>
+    </div>
+    ```
+
+7. Run the application. The Essential JS 2 ButtonGroup component will render in the web browser.
+
+    ![ButtonGroup Sample](./images/button-group.png)
--- a/src/buttons/button-group/how-to/create-buttongroup-with-icons.md
+++ b/src/buttons/button-group/how-to/create-buttongroup-with-icons.md
@ -0,0 +1,47 @@
+---
+title: "Create ButtonGroup with icons"
+component: "ButtonGroup"
+description: "ButtonGroup how to section, create ButtonGroup using util function, icons, form submit, show selected state on initial render."
+---
+
+# Create ButtonGroup with icons
+
+ButtonGroup with icons can be achieved by `IconCss` property of the Button component.
+
+The following example illustrates how to create ButtonGroup with icons.
+
+`Index.razor`
+
+```csharp
+
+<div class='e-btn-group'>
+    <EjsButton ID="left" Content="Left" IconCss="e-icons e-left-icon"></EjsButton>
+    <EjsButton ID="mIddle" Content="Center" IconCss="e-icons e-mIddle-icon"></EjsButton>
+    <EjsButton ID="right" Content="Right" IconCss="e-icons e-right-icon"></EjsButton>
+</div>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+     <style>
+        .e-btn-group {
+            margin: 25px 5px 20px 20px;
+        }
+
+        .e-left-icon::before {
+            content: '\e33a';
+        }
+
+        .e-right-icon::before {
+            content: '\e34d';
+        }
+
+        .e-middle-icon::before {
+            content: '\e35e';
+        }
+    </style>
+
+  ```  
--- a/src/buttons/button-group/how-to/create-buttongroup-with-rounded-corner.md
+++ b/src/buttons/button-group/how-to/create-buttongroup-with-rounded-corner.md
@ -0,0 +1,24 @@
+---
+title: "Create ButtonGroup with rounded corner"
+component: "ButtonGroup"
+description: "ButtonGroup how to section, create ButtonGroup using util function, icons, form submit, show selected state on initial render."
+---
+
+# Create ButtonGroup with rounded corner
+
+The ButtonGroup with rounded corner has round edges on both sided. To ButtonGroup with rounded corner, `e-round-corner` class is to be
+added to the target element.
+
+The following example illustrates how to create ButtonGroup with rounded corner.
+
+`Index.razor`
+
+```csharp
+
+<div class='e-btn-group e-round-corner'>
+    <EjsButton ID="html" Content="HTML"></EjsButton>
+    <EjsButton ID="css" Content="CSS"></EjsButton>
+    <EjsButton ID="javascript" Content="Javascript"></EjsButton>
+</div>
+
+  ```
--- a/src/buttons/button-group/how-to/disable.md
+++ b/src/buttons/button-group/how-to/disable.md
@ -0,0 +1,36 @@
+---
+title: "Disable"
+component: "ButtonGroup"
+description: "ButtonGroup how to section, create ButtonGroup using util function, icons, form submit, show selected state on initial render."
+---
+
+# Disable
+
+## Particular button
+
+To disable a particular button in a ButtonGroup, `disabled` attribute should be added to corresponding button element.
+
+## Whole ButtonGroup
+
+To disable whole ButtonGroup, `disabled` attribute should be added to all the button elements.
+
+The following example illustrates how to disable the particular and the whole ButtonGroup.
+
+`Index.razor`
+
+```csharp
+<div class='e-btn-group'>
+    <EjsButton ID="html" Content="HTML"></EjsButton>
+    <EjsButton ID="css" Content="CSS" disabled="true"></EjsButton>
+    <EjsButton ID="javascript" Content="Javascript"></EjsButton>
+</div>
+
+<div class='e-btn-group'>
+    <EjsButton ID="html_1" Content="HTML" disabled="true"></EjsButton>
+    <EjsButton ID="css_1" Content="CSS" disabled="true"></EjsButton>
+    <EjsButton ID="javascript_1" Content="Javascript" disabled="true"></EjsButton>
+</div>
+
+  ```
+
+> To disable radio/checkbox type ButtonGroup, the `disabled` attribute should be added to the particular input element.
--- a/src/buttons/button-group/how-to/enable-ripple.md
+++ b/src/buttons/button-group/how-to/enable-ripple.md
@ -0,0 +1,33 @@
+---
+title: "Enable ripple"
+component: "ButtonGroup"
+description: "ButtonGroup how to section, create ButtonGroup using util function, icons, form submit, show selected state on initial render."
+---
+
+# Enable ripple
+
+The following example illustrates how to enable ripple for ButtonGroup.
+
+`Index.razor`
+
+```csharp
+@using Syncfusion.EJ2.RazorComponents;
+@using Microsoft.JSInterop;
+
+  <div class='e-btn-group'>
+    <EjsButton ID="html" Content="HTML"></EjsButton>
+    <EjsButton ID="css" Content="CSS"></EjsButton>
+    <EjsButton ID="javascript" Content="Javascript"></EjsButton>
+</div>
+
+@functions {
+
+    [Inject]
+    protected IJSRuntime JSRuntime { get; set; }
+
+    protected override void OnAfterRender()
+    {
+        this.JSRuntime.Ejs().EnableRipple(true);
+    }
+}
+  ```
--- a/src/buttons/button-group/how-to/enable-rtl.md
+++ b/src/buttons/button-group/how-to/enable-rtl.md
@ -0,0 +1,23 @@
+---
+title: "Enable RTL"
+component: "ButtonGroup"
+description: "ButtonGroup how to section, create ButtonGroup using util function, icons, form submit, show selected state on initial render."
+---
+
+# Enable RTL
+
+ButtonGroup supports RTL functionality. This can be achieved by adding `e-rtl` class to the target element.
+
+The following example illustrates how to create ButtonGroup with RTL support.
+
+`Index.razor`
+
+```csharp
+
+  <div class='e-btn-group e-rtl'>
+    <EjsButton ID="html" Content="HTML"></EjsButton>
+    <EjsButton ID="css" Content="CSS"></EjsButton>
+    <EjsButton ID="javascript" Content="Javascript"></EjsButton>
+</div>
+
+  ```
--- a/src/buttons/button-group/how-to/show-buttongroup-selected-state-on-initial-render.md
+++ b/src/buttons/button-group/how-to/show-buttongroup-selected-state-on-initial-render.md
@ -0,0 +1,27 @@
+---
+title: "Show ButtonGroup selected state on initial render"
+component: "ButtonGroup"
+description: "ButtonGroup how to section, create ButtonGroup using util function, icons, form submit, show selected state on initial render."
+---
+
+# Show ButtonGroup selected state on initial render
+
+To show selected state on initial render, `checked` property should to added to the corresponding
+input element.
+
+The following example illustrates how to show selected state on initial render.
+
+`Index.razor`
+
+```csharp
+
+<div class='e-btn-group'>
+    <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
+    <label class="e-btn" for="checkbold">Bold</label>
+    <input type="checkbox" id="checkitalic" name="font" value="italic" />
+    <label class="e-btn" for="checkitalic">Italic</label>
+    <input type="checkbox" id="checkline" name="font" value="underline"/>
+    <label class="e-btn" for="checkline">Underline</label>
+</div>
+
+  ```
--- a/src/buttons/button-group/images/button-group.png
+++ b/src/buttons/button-group/images/button-group.png
--- a/src/buttons/button-group/images/import-cdn.png
+++ b/src/buttons/button-group/images/import-cdn.png
--- a/src/buttons/button-group/images/new-project.png
+++ b/src/buttons/button-group/images/new-project.png
--- a/src/buttons/button-group/images/nuget-explorer.png
+++ b/src/buttons/button-group/images/nuget-explorer.png
--- a/src/buttons/button-group/images/razor-components-template.png
+++ b/src/buttons/button-group/images/razor-components-template.png
--- a/src/buttons/button-group/images/select-nuget.png
+++ b/src/buttons/button-group/images/select-nuget.png
--- a/src/buttons/button-group/index.md
+++ b/src/buttons/button-group/index.md
@ -0,0 +1,9 @@
+# Overview
+
+The **ProgressButton** visualizes the progression of an operation to indicate the user that a process is happening in the background with visual representation.
+
+## Key Features
+
+* **Spinner and its customization**
+* **Progress and animation**
+* **Customize ProgressButton using cssClass**
--- a/src/buttons/button-group/selection-and-nesting.md
+++ b/src/buttons/button-group/selection-and-nesting.md
@ -0,0 +1,124 @@
+---
+title: "ButtonGroup Selection and Nesting"
+component: "ButtonGroup"
+description: "ButtonGroup supports single selection, multiple selection, nesting with dropdownbutton and splitbutton components."
+---
+
+# Selection and Nesting
+
+## Selection
+
+### Single selection
+
+ButtonGroup supports radio type selection in which only one button can be selected. This can be achieved by adding input element
+along with `id` attribute with its corresponding label along with `for` attribute inside the target element. In this ButtonGroup,
+the type of the input element should be `radio` and `e-btn` is added to the `label` element.
+
+The following example illustrates the single selection behavior in ButtonGroup.
+
+`Index.razor`
+
+```csharp
+
+  <div class='e-btn-group'>
+    <input type="radio" Id="radioleft" name="align" value="left" />
+    <label class="e-btn" for="radioleft">Left</label>
+    <input type="radio" Id="radiomIddle" name="align" value="mIddle" />
+    <label class="e-btn" for="radiomIddle">Center</label>
+    <input type="radio" Id="radioright" name="align" value="right" />
+    <label class="e-btn" for="radioright">Right</label>
+</div>
+
+  ```
+
+### Multiple selection
+
+ButtonGroup supports checkbox type selection in which multiple button can be selected. This can be achieved by adding input element
+along with `id` attribute with its corresponding label along with `for` attribute inside the target element. In this ButtonGroup,
+the type of the input element should be `checkbox` and `e-btn` is added to the `label` element.
+
+The following example illustrates the multiple selection behavior in ButtonGroup.
+
+`Index.razor`
+
+```csharp
+
+   <div class='e-btn-group'>
+    <input type="checkbox" Id="checkbold" name="font" value="bold" />
+    <label class="e-btn" for="checkbold">Bold</label>
+    <input type="checkbox" Id="checkitalic" name="font" value="italic" />
+    <label class="e-btn" for="checkitalic">Italic</label>
+    <input type="checkbox" Id="checkline" name="font" value="underline" />
+    <label class="e-btn" for="checkline">Underline</label>
+</div>
+
+  ```
+
+## Nesting
+
+Nesting with other components can be possible in ButtonGroup. The following components can be nested in ButtonGroup.
+* DropDownButton
+* SplitButton
+
+### DropDownButton
+
+To initialize DropDownButton component refer [`DropDownButton Getting Started documentation`](./../../drop-down-button/getting-started).
+
+In the following example, the DropDownButton component is rendered in ButtonGroup.
+
+`Index.razor`
+
+```csharp
+@using Syncfusion.EJ2.RazorComponents.Navigations
+
+<div class='e-btn-group'>
+    <EjsButton ID="html" Content="HTML"></EjsButton>
+    <EjsButton ID="css" Content="CSS"></EjsButton>
+    <EjsButton ID="javascript" Content="Javascript"></EjsButton>
+    <EjsDropDownButton ID="element" Content="More" Items="@items"></EjsDropDownButton>
+</div>
+
+@functions {
+
+    public List<MenuItem> items { get; set; } = new List<MenuItem>
+{
+    new MenuItem{ Text = "Learn SQL" },
+    new MenuItem{ Text = "Notifications"},
+    new MenuItem{ Text = "User Settings" }
+    };
+
+}
+
+  ```
+
+### SplitButton
+
+To initialize SplitButton component refer [`SplitButton Getting Started documentation`](./../../split-button/getting-started).
+
+In the following example, the SplitButton component is rendered in ButtonGroup.
+
+`Index.razor`
+
+```csharp
+@using Syncfusion.EJ2.RazorComponents.Navigations
+
+  <div class='e-btn-group'>
+    <EjsButton ID="cut" Content="Cut"></EjsButton>
+    <EjsButton ID="copy" Content="Copy"></EjsButton>
+    <EjsSplitButton ID="element" Content="Paste" Items="@items"></EjsSplitButton>
+</div>
+
+@functions {
+
+public List<MenuItem> items { get; set; } = new List<MenuItem>
+{
+    new MenuItem{ Text = "Paste" },
+    new MenuItem{ Text = "Paste Text"},
+    new MenuItem{ Text = "Paste Special" }
+    };
+}
+  ```
+
+## See Also
+
+* [Show ButtonGroup selected state on initial render](./how-to/show-buttongroup-selected-state-on-initial-render)
--- a/src/buttons/button-group/summary.md
+++ b/src/buttons/button-group/summary.md
@ -0,0 +1,12 @@
+# Summary
+
+* [Getting Started](button-group/getting-started.md)
+* [Types and Styles](button-group/types-and-styles.md)
+* [Selection and Nesting](button-group/selection-and-nesting.md)
+* [Accessibility](button-group/accessibility.md)
+* [Create ButtonGroup with icons](button-group/how-to/create-buttongroup-with-icons.md)
+* [Create ButtonGroup with rounded corner](button-group/how-to/create-buttongroup-with-rounded-corner.md)
+* [Disable](button-group/how-to/disable.md)
+* [Enable ripple](button-group/how-to/enable-ripple.md)
+* [Enable RTL](button-group/how-to/enable-rtl.md)
+* [Show ButtonGroup selected state on initial render](button-group/how-to/show-buttongroup-selected-state-on-initial-render.md)
--- a/src/buttons/button-group/types-and-styles.md
+++ b/src/buttons/button-group/types-and-styles.md
@ -0,0 +1,93 @@
+---
+title: "ButtonGroup Types and Styles"
+component: "ButtonGroup"
+description: "ButtonGroup CSS control supports outline type and predefined styles."
+---
+
+# Types and Styles
+
+This section explains about different types and styles of ButtonGroup.
+
+## ButtonGroup types
+
+### Outline ButtonGroup
+
+An Outline ButtonGroup has a border with transparent background. To create Outline ButtonGroup, `e-outline` class should
+be added to the target element and to each button elements using `CssClass` property.
+
+The following sample illustrates how to achieve an Outline ButtonGroup,
+
+`Index.razor`
+
+```csharp
+
+   <div class='e-btn-group e-outline'>
+    <EjsButton ID="html" CssClass='e-outline' Content="HTML"></EjsButton>
+    <EjsButton ID="css" CssClass='e-outline' Content="CSS"></EjsButton>
+    <EjsButton ID="javascript" CssClass='e-outline' Content="Javascript"></EjsButton>
+</div>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+    <style>
+        .e-btn-group {
+       margin: 25px 5px 20px 20px;
+     }
+    </style>
+
+  ```  
+
+> ButtonGroup does not have support for `flat` and `round` types.
+
+## ButtonGroup styles
+
+The Essential JS 2 ButtonGroup has the following predefined styles. This can be achieved by adding corresponding class name
+in each button elements using `CssClass` property.
+
+| Class | Description |
+| -------- | -------- |
+| e-primary | Used to represent a primary action. |
+| e-success | Used to represent a positive action. |
+| e-info | Used to represent an informative action. |
+| e-warning | Used to represent an action with caution. |
+| e-danger | Used to represent a negative action. |
+
+The following example illustrates how to achieve predefined styles in ButtonGroup.
+
+`Index.razor`
+
+```csharp
+
+   <div class='e-btn-group'>
+    <EjsButton ID="approve" Content="Approve" CssClass='e-success'></EjsButton>
+    <EjsButton ID="reject" Content="Reject" CssClass='e-warning'></EjsButton>
+    <EjsButton ID="view" Content="View" CssClass='e-info'></EjsButton>
+    <EjsButton ID="edit" Content="Edit" CssClass='e-primary'></EjsButton>
+    <EjsButton ID="delete" Content="Delete" CssClass='e-danger'></EjsButton>
+</div>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+    <style>
+        .e-btn-group {
+       margin: 25px 5px 20px 20px;
+     }
+    </style>
+
+  ```  
+
+> Predefined ButtonGroup styles provide only the visual indication. So,
+ButtonGroup content should define the ButtonGroup style for the users of assistive technologies such as screen readers.
+
+## See Also
+
+* [ButtonGroup with icons](./how-to/create-buttongroup-with-icons)
+* [Create ButtonGroup with rounded corner](./how-to/create-buttongroup-with-rounded-corner)
--- a/src/buttons/button/getting-started.md
+++ b/src/buttons/button/getting-started.md
@ -0,0 +1,62 @@
+---
+title: "Getting Started"
+component: "Button"
+description: "This section helps to learn how to create the button in ASP.NET Core Razor application with its basic features in step-by-step procedure."
+---
+
+<!-- markdownlint-disable MD024 -->
+
+# Getting Started with Essential JS 2 for ASP.NET Core Razor Buttonss Component in Visual Studio 2019
+
+This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor Button Component web application using the [Visual Studio 2019](https://visualstudio.microsoft.com/vs/preview/).
+
+## Prerequisites
+
+The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the [.NET Core Razor components documentation website](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio).
+
+* [Visual Studio 2019 Preview](https://visualstudio.microsoft.com/vs/preview/) with the ASP.NET and web development workload
+* [.NET Core SDK 3.0 Preview](https://dotnet.microsoft.com/download/dotnet-core/3.0)
+
+## Create a Razor Component application from VS 2019
+
+1. Choose **File > New > Project...** in the Visual Studio menu bar.
+
+    ![new project in aspnetcore razor](images/new-project.png)
+
+2. Make sure **.NET Core** and **ASP.NET Core 3.0** are selected at the top.
+
+    ![select framework](images/razor-components-template.png)
+
+3. Choose the **Razor Components** template and change the application name, and then click **OK**.
+
+## Importing Essential JS 2 Razor components in the application
+
+1. Now, add the **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.
+
+    ![nuget explorer](images/nuget-explorer.png)
+
+2. Search the **Syncfusion.EJ2.AspNet.Core.RazorComponents** keyword in the Browse tab and install **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package in the application.
+
+    ![select nuget](images/select-nuget.png)
+
+3. The Essential JS 2 package will be included in the project, after the installation process is completed.
+
+4. Open **~/_ViewImports.cshtml** file and import the `Syncfusion.EJ2.RazorComponents`.
+
+    ```cshtml
+    @addTagHelper *, Syncfusion.EJ2.RazorComponents
+    ```
+
+5. Add the client-side resources through CDN or local npm package in the `<head>` element of the **~/wwwroot/index.html** page.
+
+    ![import cdn](images/import-cdn.png)
+
+6. Now, add the Syncfusion Essential JS 2 Button component in any web page (cshtml) in the `Pages` folder. For example, the Button component is added in the **~/Pages/Index.cshtml** page.
+
+    ```cshtml
+    <EjsButton ID="element">Button</EjsButton>
+    ```
+
+7. Run the application. The Essential JS 2 Button component will render in the web browser.
+
+    ![Button Sample](./images/button.png)
--- a/src/buttons/button/how-to/create-a-block-button.md
+++ b/src/buttons/button/how-to/create-a-block-button.md
@ -0,0 +1,22 @@
+---
+title: "Create a Block Button"
+component: "Button"
+description: "Button how to section, block button, repeat button, tooltip for Button, customization of button appearance, input and anchor elements."
+---
+
+# Create a Block Button
+
+You can customize a Button into a Block Button that will span the entire width of its parent element. To create a Block
+Button, set the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~CssClass.html)
+property to `e-block`.
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="blockbtn" Content="BLOCKBUTTON" CssClass="e-block"></EjsButton>
+   <EjsButton ID="primarybtn" Content="BLOCKBUTTON" CssClass="e-block" IsPrimary="true"></EjsButton>
+   <EjsButton ID="successbtn" Content="BLOCKBUTTON" CssClass="e-block e-success"></EjsButton>
+
+}
+  ```
--- a/src/buttons/button/how-to/customize-button-appearance.md
+++ b/src/buttons/button/how-to/customize-button-appearance.md
@ -0,0 +1,39 @@
+---
+title: "Customize Button Appearance"
+component: "Button"
+description: "Button how to section, block button, repeat button, tooltip for Button, customization of button appearance, input and anchor elements."
+---
+
+# Customize Button Appearance
+
+You can customize the appearance of the Button by using the Cascading Style Sheets (CSS). Define the CSS according to
+your requirement, and assign the class name to the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~CssClass.html)
+property. In the following code snippet the background color, text color, height, width, and sharp corner of the Button
+can be customized through the `e-custom` class for all states (hover, focus, and active).
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="custom" Content="CUSTOM" CssClass="e-custom"></EjsButton>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+    <style>
+        .e-custom {
+            border-radius: 0;
+            height: 30px;
+            width: 80px;
+        }
+
+            .e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {
+                background-color: #ff6e40;
+                color: #fff;
+            }
+    </style>
+
+  ```  
--- a/src/buttons/button/how-to/customize-input-and-anchor-elements.md
+++ b/src/buttons/button/how-to/customize-input-and-anchor-elements.md
@ -0,0 +1,24 @@
+---
+title: "Customize input and anchor elements"
+component: "Button"
+description: "Button how to section, block button, repeat button, tooltip for Button, customization of button appearance, input and anchor elements."
+---
+
+# Customize input and anchor elements
+
+You can customize the appearance of the input and anchor elements using predefined styles through the class property. In the following code
+snippet, the input element is customized as a link Button by setting the `e-btn e-link` class, and the anchor element is customized as a
+primary Button by setting the `e-btn e-primary` class.
+
+`Index.razor`
+
+```csharp
+
+   <div>
+    <input type="button" ID="inputbtn" value="Input Button" class="e-btn e-link">
+</div>
+
+<div>
+    <a ID="anchorbtn" class="e-btn e-primary" href="#">Google</a>
+</div
+  ```
--- a/src/buttons/button/how-to/right-to-left.md
+++ b/src/buttons/button/how-to/right-to-left.md
@ -0,0 +1,55 @@
+---
+title: "Right-To-Left"
+component: "Button"
+description: "Button how to section, block button, repeat button, tooltip for Button, customization of button appearance, input and anchor elements."
+---
+
+# Right-To-Left
+
+Button component has RTL support. This can be achieved by setting [`enableRtl`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsCheckBox~EnableRtl.html) as true.
+
+The following example illustrates how to enable right-to-left support in Button component.
+
+`Index.razor`
+
+```csharp
+
+  <EjsButton ID="rtl" Content="Settings" IconCss="e-btn-icons e-setting-icon" EnableRtl="true"></EjsButton>
+
+  ```
+
+  `_Host.cshtml`
+
+  ```html
+
+    <style>
+        @@font-face {
+            font-family: 'settings';
+            src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRsAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlm7/npHAAAAcgAAAEwaGVhZBKtDIMAAADQAAAANmhoZWEHmQNrAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQCYAAAAAAHAAAAABm1heHABDgB0AAABCAAAACBuYW1lxmFdywAAAvgAAAIxcG9zdDwSCicAAAUsAAAANwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAMLNyX18PPPUACwPoAAAAANfSY9oAAAAA19Jj2gAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAACAGgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAmAAAAAIAAAAAA+oD6gALAGcAAAEOAQcuASc+ATceAQEVBgcnJiIPAQYUHwEOAQcjIgYdAR4BOwEWFwcGFB8BFjI/AR4BFxUeATsBPgE9ATY3FxYyPwE2NC8BPgE3MzI2PQE0JisBJic3NjQvASYiDwEuASc1LgEnIw4BAr4CcVVUcQMDcVRVcf7pOTRbBRQGUQYGWhAYB30LDgEPCX0OIVoHB1EFFQVbGTYeAQ4KcQsOOTRbBRQGUQYGWhAXB34LDQ8Jfg4gWgcHUQUVBVsZNh4BDgpxCQ8B9lRxAwNxVFVxAgJxAYd+DiBaBgZRBRUFWBk2Hg8KcQsOOTRbBxQHUQYGWhAYB30LDgEPCX0OIVoGBk4FFQVbGTYeDwpxCw06NFoIEwhRBgZaEBgHfQsNAQENAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBzZXR0aW5nc1JlZ3VsYXJzZXR0aW5nc3NldHRpbmdzVmVyc2lvbiAxLjBzZXR0aW5nc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcwBlAHQAdABpAG4AZwBzAFIAZQBnAHUAbABhAHIAcwBlAHQAdABpAG4AZwBzAHMAZQB0AHQAaQBuAGcAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcwBlAHQAdABpAG4AZwBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAA1zZXR0aW5ncy0tLTExAAAA) format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        .e-btn-icons {
+            font-family: 'settings' !important;
+            speak: none;
+            font-size: 55px;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        button {
+            margin: 25px 5px 20px 20px;
+        }
+
+        .e-setting-icon::before {
+            content: '\e700';
+        }
+    </style>
+
+  ```  
--- a/src/buttons/button/how-to/set-the-disabled-state.md
+++ b/src/buttons/button/how-to/set-the-disabled-state.md
@ -0,0 +1,20 @@
+---
+title: "Set the disabled state"
+component: "Button"
+description: "Button how to section, block button, repeat button, tooltip for Button, customization of button appearance, input and anchor elements."
+---
+
+# Set the disabled state
+
+Button component can be enabled/disabled by giving [`disabled`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~Disabled.html)
+property. To disable Button component, the `disabled` property can be set as `true`.
+
+The following example demonstrates Button in `disabled` state.
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="disabled" Disabled="true" Content="Disabled"></EjsButton>
+
+  ```
--- a/src/buttons/button/images/button.PNG
+++ b/src/buttons/button/images/button.PNG
--- a/src/buttons/button/images/import-cdn.png
+++ b/src/buttons/button/images/import-cdn.png
--- a/src/buttons/button/images/new-project.png
+++ b/src/buttons/button/images/new-project.png
--- a/src/buttons/button/images/nuget-explorer.png
+++ b/src/buttons/button/images/nuget-explorer.png
--- a/src/buttons/button/images/razor-components-template.png
+++ b/src/buttons/button/images/razor-components-template.png
--- a/src/buttons/button/images/select-nuget.png
+++ b/src/buttons/button/images/select-nuget.png
--- a/src/buttons/button/index.md
+++ b/src/buttons/button/index.md
@ -0,0 +1,9 @@
+# Overview
+
+The **Button** is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.
+
+## Key Features
+
+* **Button types**
+* **Predefined Button styles**
+* **Supports text and icon in the Button**
--- a/src/buttons/button/native-event.md
+++ b/src/buttons/button/native-event.md
@ -0,0 +1,64 @@
+---
+title: "Native Event"
+component: "Button"
+description: "This section helps to learn how to trigger the native events in ASP.NET Core Razor application"
+---
+
+# Overview
+
+You can define the native event using on`<event>` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments.
+
+The different event argument types for each event are,
+
+* Focus Events - UIFocusEventArgs
+* Mouse Events - UIMouseEventArgs
+* Drag Events - UIDragEventArgs
+* Keyboard Events - UIKeyboardEventArgs
+* Input Events - UIChangeEventArgs/UIEventArgs
+* Touch Events – UITouchEventArgs
+* Clipboard Events - UIClipboardEventArgs
+
+## List of Native events supported
+
+We have provided the following native event support to the Button component:
+
+| List of Native events |  |  | |
+| --- | --- | --- | --- |
+| onclick | onblur | onfocus | onfocusout |
+|onmousemove|onmouseover|onmouseout|onmousedown|onmouseup|
+|ondblclick|onkeydown|onkeyup|onkeypress|
+|ontouchend|onfocusin|onmouseup|ontouchstart|
+
+## How to bind click event to Button
+
+The ‘onclick’ attribute is used to bind the click event for button. Here, we have explained about the sample code snippets of toggle button.
+
+`Default.razor`
+
+```csharp
+@using Syncfusion.EJ2.RazorComponents.Buttons
+
+<EjsButton ID="togglebtn" @ref="togglebtn" Onclick="@onToggleClick" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@content" IconCss="@iconCss"></EjsButton>
+
+@code {
+    EjsButton togglebtn;
+    public string content = "Play";
+    public string iconCss = "e-btn-sb-icons e-play-icon";
+    private void onToggleClick(UIMouseEventArgs args)
+    {
+        if (togglebtn.Content == "Play")
+        {
+            this.content = "Pause";
+            this.iconCss = "e-btn-sb-icons e-pause-icon";
+        }
+        else
+        {
+            this.content = "Play";
+            this.iconCss = "e-btn-sb-icons e-play-icon";
+        }
+        togglebtn.Content = this.content;
+        togglebtn.IconCss = this.iconCss;
+        togglebtn.DataBind();
+    }
+}
+```
--- a/src/buttons/button/summary.md
+++ b/src/buttons/button/summary.md
@ -0,0 +1,10 @@
+# Summary
+
+* [Getting Started](button/getting-started.md)
+* [Native Events](button/native-event.md)
+* [Types and Styles](button/types-and-styles.md)
+* [Create a Block Button](button/how-to/create-a-block-button.md)
+* [Customize Button Appearance](button/how-to/customize-button-appearance.md)
+* [Customize input and anchor elements](button/how-to/customize-input-and-anchor-elements.md)
+* [Right-To-Left](button/how-to/right-to-left.md)
+* [Set the disabled state](button/how-to/set-the-disabled-state.md)
--- a/src/buttons/button/types-and-styles.md
+++ b/src/buttons/button/types-and-styles.md
@ -0,0 +1,286 @@
+---
+title: "ButtonGroup Types and Styles"
+component: "Button"
+description: "Button control supports different types, predefined styles, sizes and also has support for icons."
+---
+
+# Types and Styles
+
+This section explains the different styles and types of Buttons.
+
+## Button styles
+
+The Essential JS 2 Button has the following predefined styles that can be defined using the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~CssClass.html) property.
+
+| Class | Description |
+| -------- | -------- |
+| e-primary | Used to represent a primary action. |
+| e-success | Used to represent a positive action. |
+| e-info |  Used to represent an informative action. |
+| e-warning | Used to represent an action with caution. |
+| e-danger | Used to represent a negative action. |
+| e-link |  Changes the appearance of the Button like a hyperlink. |
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="primarybtn" CssClass="e-primary" Content="Primary"></EjsButton>
+   <EjsButton ID="successbtn" CssClass="e-success" Content="Success"></EjsButton>
+   <EjsButton ID="infobtn" CssClass="e-info" Content="Info"></EjsButton>
+   <EjsButton ID="warningbtn" CssClass="e-warning" Content="Warning"></EjsButton>
+   <EjsButton ID="dangerbtn" CssClass="e-danger" Content="Danger"></EjsButton>
+   <EjsButton ID="linkbtn" CssClass="e-link" Content="Link"></EjsButton>
+
+  ```
+
+  `_Host.cshtml`
+
+  ```html
+
+   <style>
+        button {
+            margin: 25px 5px 20px 20px;
+        }
+    </style>
+
+  ```  
+
+> Predefined Button styles provide only the visual indication. So,
+Button content should define the Button style for the users of assistive technologies such as screen readers.
+
+## Button types
+
+The types of Essential JS 2 Button are as follows:
+
+* Flat Button
+* Outline Button
+* Round Button
+* Toggle Button
+
+### Flat Button
+
+The Flat Button is styled with no background color. To create a flat Button,
+set the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~CssClass.html) property to `e-flat`.
+
+### Outline Button
+
+An outline Button has a border with transparent background. To create an outline Button,
+set the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~CssClass.html) property to `e-outline`.
+
+### Round Button
+
+A round Button is shaped like a circle. Usually, it contains an icon representing its action. To create a round Button,
+set the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~CssClass.html) property to `e-round`.
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="flat" CssClass="e-flat" Content="Flat"></EjsButton>
+   <EjsButton ID="outline" CssClass="e-outline" Content="Outline"></EjsButton>
+   <EjsButton ID="round" CssClass="e-round" IconCss="e-icons e-plus-icon" IsPrimary="true"></EjsButton>
+
+  ```
+
+`_Host.cshtml`
+
+  ```html
+
+   <style>
+
+        button {
+            margin: 25px 5px 20px 20px;
+        }
+
+        .e-plus-icon::before {
+            content: '\e823';
+        }
+    </style>
+
+  ```  
+
+### Toggle Button
+
+A toggle Button allows you to change between the two states. The Button is active in toggled state and can be recognized through the `e-active` class.
+The functionality of the toggle Button is handled by click event. To create a toggle Button,
+set the [`isToggle`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~IsToggle.html) property to `true`. In the following code snippet,
+the toggle Button text changes to play/pause based on the state of the Button with the use of click event.
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="togglebtn" ref="togglebtn" onclick="@onToggleClick" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@content" IconCss="@iconCss"></EjsButton>
+
+   @functions {
+
+     EjsButton togglebtn;
+    public string content = "Play";
+    public string iconCss = "e-btn-sb-icons e-play-icon";
+    private void onToggleClick(UIMouseEventArgs args)
+    {
+        if (togglebtn.Content == "Play")
+        {
+            this.content = "Pause";
+            this.iconCss = "e-btn-sb-icons e-pause-icon";
+        }
+        else
+        {
+            this.content = "Play";
+            this.iconCss = "e-btn-sb-icons e-play-icon";
+        }
+        togglebtn.Content = this.content;
+        togglebtn.IconCss = this.iconCss;
+        togglebtn.DataBind();
+    }
+   }
+
+  ```
+
+  `_Host.cshtml`
+
+  ```html
+
+   <style>
+        @@font-face {
+            font-family: 'button-icons';
+            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        .e-btn-sb-icons {
+            font-family: 'button-icons';
+            line-height: 1;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        .e-play-icon::before {
+            content: '\e701';
+        }
+
+        .e-pause-icon::before {
+            content: '\e705';
+        }
+    </style>
+
+  ```  
+
+## Icons
+
+### Button with font icons
+
+The Button can have an icon to provide the visual representation of the action. To place the icon on a Button,
+set the [`iconCss`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~IconCss.html)
+property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the Button.
+You can customize the icon's position by using the [`iconPosition`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~IconPosition.html) property.
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="iconbutton" Content="PREVIOUS" IconCss="e-btn-sb-icon e-prev-icon"></EjsButton>
+   <EjsButton ID="iconposbtn" Content="STOP" IconCss="e-btn-sb-icon e-stop-icon"></EjsButton>
+
+  ```
+
+`_Host.cshtml`
+
+  ```html
+
+   <style>
+        button {
+            margin: 25px 5px 20px 20px;
+        }
+
+        @@font-face {
+            font-family: 'btn-icon';
+            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        .e-btn-sb-icon {
+            font-family: 'btn-icon' !important;
+            speak: none;
+            font-size: 55px;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        .e-stop-icon::before {
+            content: '\e703';
+        }
+
+        .e-prev-icon::before {
+            content: '\e702';
+        }
+    </style>
+
+  ```  
+
+> The Essential JS 2 provides a set of icons that can be loaded by applying `e-icons` class name to the element.
+You can also use third party icons on the Button using the [`iconCss`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~IconCss.html) property.
+
+### Button with SVG image
+
+SVG image can be added to the Button using [`iconCss`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~IconCss.html)
+property.
+
+In the following example, SVG image is added using the iconCss class `e-search-icon` by setting `height` and `width` property.
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="iconbutton" IconCss="e-search-icon"></EjsButton>
+
+  ```
+
+`_Host.cshtml`
+
+  ```html
+
+    <style>
+        button {
+            margin: 25px 5px 20px 20px;
+        }
+
+        .e-btn-icon.e-search-icon {
+            background: url('search_icon.svg');
+            height: 25px;
+            width: 25px;
+        }
+    </style>
+
+  ```  
+
+## Button size
+
+The two types of Button sizes are default and small. To change the size of the default Button to small Button,
+set the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsButton~CssClass.html) property to `e-small`.
+
+`Index.razor`
+
+```csharp
+
+   <EjsButton ID="smallbtn" CssClass="e-small" Content="SMALL"></EjsButton>
+   <EjsButton ID="normalbtn" Content="NORMAL"></EjsButton>
+
+  ```
+
+## See Also
+
+* [Customize Button appearance](./how-to/customize-button-appearance)
+* [How to create block button](./how-to/create-a-block-button)
--- a/src/buttons/check-box/accessibility.md
+++ b/src/buttons/check-box/accessibility.md
@ -0,0 +1,65 @@
+---
+title: "CheckBox Accessibility"
+component: "CheckBox"
+description: "CheckBox control has accessibility support to help access the features via keyboard, on-screen readers, or other assistive technology devices."
+---
+
+# Accessibility
+
+The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies.
+CheckBox provides built-in compliance with `WAI-ARIA` specifications. `WAI-ARIA` support is achieved through the attributes like `aria-checked` and `aria-disabled`. It helps the people with disabilities by providing information about the widget for assistive
+technology in the screen readers. CheckBox component contains the `checkbox` role.
+
+| Properties | Functionality |
+| ------------ | ----------------------- |
+| role | Indicates the type of input element. |
+| aria-checked | Indicates whether the input is checked, unchecked, or represents mixture of checked and unchecked values. |
+| aria-disabled | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
+
+## Keyboard interaction
+
+<!-- markdownlint-disable MD033 -->
+<table>
+<tr>
+<td>
+<b>Keyboard shortcuts</b></td><td>
+<b>Actions</b></td></tr>
+<tr>
+<td>
+<kbd>Space</kbd></td><td>
+When the checkbox has focus, pressing the Space key changes the state of the checkbox.</td></tr>
+</table>
+
+`Index.razor`
+
+```csharp
+
+<ul>
+    <li>
+        <EjsCheckBox ID="checked" Checked="true" Label="Checked State"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="unchecked" Label="Unchecked State"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="indeterminate" Indeterminate="true" Label="Intermediate State"></EjsCheckBox>
+    </li>
+</ul>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+     <style >
+        .e-checkbox-wrapper {
+            margin-top: 18px;
+        }
+
+        li {
+            list-style: none;
+        }
+    </style>
+
+  ```  
--- a/src/buttons/check-box/getting-started.md
+++ b/src/buttons/check-box/getting-started.md
@ -0,0 +1,62 @@
+---
+title: "Getting Started"
+component: "CheckBox"
+description: "This section helps to learn how to create the CheckBox in ASP.NET Core Razor application with its basic features in step-by-step procedure."
+---
+
+<!-- markdownlint-disable MD024 -->
+
+# Getting Started with Essential JS 2 for ASP.NET Core Razor CheckBox Component in Visual Studio 2019
+
+This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor CheckBox Component web application using the [Visual Studio 2019](https://visualstudio.microsoft.com/vs/preview/).
+
+## Prerequisites
+
+The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the [.NET Core Razor components documentation website](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio).
+
+* [Visual Studio 2019 Preview](https://visualstudio.microsoft.com/vs/preview/) with the ASP.NET and web development workload
+* [.NET Core SDK 3.0 Preview](https://dotnet.microsoft.com/download/dotnet-core/3.0)
+
+## Create a Razor Component application from VS 2019
+
+1. Choose **File > New > Project...** in the Visual Studio menu bar.
+
+    ![new project in aspnetcore razor](images/new-project.png)
+
+2. Make sure **.NET Core** and **ASP.NET Core 3.0** are selected at the top.
+
+    ![select framework](images/razor-components-template.png)
+
+3. Choose the **Razor Components** template and change the application name, and then click **OK**.
+
+## Importing Essential JS 2 Razor components in the application
+
+1. Now, add the **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.
+
+    ![nuget explorer](images/nuget-explorer.png)
+
+2. Search the **Syncfusion.EJ2.AspNet.Core.RazorComponents** keyword in the Browse tab and install **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package in the application.
+
+    ![select nuget](images/select-nuget.png)
+
+3. The Essential JS 2 package will be included in the project, after the installation process is completed.
+
+4. Open **~/_ViewImports.cshtml** file and import the `Syncfusion.EJ2.RazorComponents`.
+
+    ```cshtml
+    @addTagHelper *, Syncfusion.EJ2.RazorComponents
+    ```
+
+5. Add the client-side resources through CDN or local npm package in the `<head>` element of the **~/wwwroot/index.html** page.
+
+    ![import cdn](images/import-cdn.png)
+
+6. Now, add the Syncfusion Essential JS 2 CheckBox component in any web page (cshtml) in the `Pages` folder. For example, the CheckBox component is added in the **~/Pages/Index.cshtml** page.
+
+    ```cshtml
+    <EjsCheckBox ID="element" Label="Default"></EjsCheckBox>
+    ```
+
+7. Run the application. The Essential JS 2 CheckBox component will render in the web browser.
+
+    ![CheckBox Sample](./images/check-box.png)
--- a/src/buttons/check-box/how-to/customized-checkbox.md
+++ b/src/buttons/check-box/how-to/customized-checkbox.md
@ -0,0 +1,295 @@
+---
+title: "Customized CheckBox"
+component: "CheckBox"
+description: "CheckBox how to section, name and value in form submit, and customization of CheckBox appearance, frame & check icon."
+---
+
+# Customized CheckBox
+
+## Customize CheckBox Appearance
+
+You can customize the appearance of the CheckBox component using the CSS rules.
+Define own CSS rules according to your requirement and assign the class name to the
+[`cssClass`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsCheckBox~CssClass.html) property.
+
+The background and border color of the CheckBox is customized through the custom classes to create primary, success, warning, and danger info type of checkbox.
+
+`Index.razor`
+
+```csharp
+
+<ul>
+    <li>
+        <EjsCheckBox ID="primary" Checked="true" Label="Primary" CssClass="e-primary"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="success" Checked="true" Label="Success" CssClass="e-success"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="info" Checked="true" Label="Info" CssClass="e-info"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="warning" Checked="true" Label="Warning" CssClass="e-warning"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="danger" Checked="true" Label="Danger" CssClass="e-danger"></EjsCheckBox>
+    </li>
+</ul>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+     <style>
+
+        .e-checkbox-wrapper {
+            margin-top: 18px;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        .e-checkbox-wrapper.e-primary:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #e03872;
+        }
+
+        .e-checkbox-wrapper.e-success .e-frame.e-check,
+        .e-checkbox-wrapper.e-success .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #689f38;
+        }
+
+        .e-checkbox-wrapper.e-success:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #449d44;
+        }
+
+        .e-checkbox-wrapper.e-info .e-frame.e-check,
+        .e-checkbox-wrapper.e-info .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #2196f3;
+        }
+
+        .e-checkbox-wrapper.e-info:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #0b7dda;
+        }
+
+        .e-checkbox-wrapper.e-warning .e-frame.e-check,
+        .e-checkbox-wrapper.e-warning .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #ef6c00;
+        }
+
+        .e-checkbox-wrapper.e-warning:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #cc5c00;
+        }
+
+        .e-checkbox-wrapper.e-danger .e-frame.e-check,
+        .e-checkbox-wrapper.e-danger .e-checkbox:focus + .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #d84315;
+        }
+
+        .e-checkbox-wrapper.e-danger:hover .e-frame.e-check { /* csslint allow: adjoining-classes */
+            background-color: #ba3912;
+        }
+    </style>
+
+  ```  
+
+## Customize width and height
+
+The height and width of the CheckBox component can be customized by setting `height` and `width` property.
+
+The following section explains about how to customize the height and width of the CheckBox component.
+
+`Index.razor`
+
+```csharp
+
+<EjsCheckBox ID="customsize" CssClass="e-customsize" Label="Default"></EjsCheckBox>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+     <style>
+
+        .e-checkbox-wrapper {
+            margin-top: 30px;
+        }
+
+        .e-customsize.e-checkbox-wrapper .e-frame {
+            height: 30px;
+            width: 30px;
+            padding: 8px 0;
+        }
+
+        .e-customsize.e-checkbox-wrapper .e-check {
+            font-size: 20px;
+        }
+
+        .e-customsize.e-checkbox-wrapper .e-ripple-container {
+            height: 52px;
+            top: -11px;
+            width: 47px;
+        }
+
+        .e-customsize.e-checkbox-wrapper .e-label {
+            line-height: 30px;
+            font-size: 20px;
+        }
+    </style>
+
+  ```  
+
+## Custom Frame
+
+CheckBox frame can be customized as per the requirement by adding CSS rules.
+
+In the following example, to-do list is displayed with round checkbox by changing
+`border-radius` as `100%` by adding `e-custom` class.
+
+`Index.razor`
+
+```csharp
+
+<ul>
+    <li>
+        <EjsCheckBox ID="cbox2" Label="Buy Groceries" Checked="true" CssClass="e-custom"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox3" Label="Pay Rent" Checked="true" CssClass="e-custom"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox4" Label="Make Dinner" CssClass="e-custom"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox1" Label="Finish To-do List Article" CssClass="e-custom"></EjsCheckBox>
+    </li>
+</ul>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+     <style>
+
+        li {
+            list-style: none;
+        }
+
+        .e-checkbox-wrapper {
+            margin-top: 18px;
+        }
+
+        .e-custom .e-frame {
+            border-radius: 100%;
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
+            content: '\e77d';
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-check {
+            font-size: 8.5px;
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-frame.e-check {
+            background-color: white;
+            border-color: grey;
+            color: grey;
+        }
+
+        .e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
+            background-color: white;
+            border-color: grey;
+            color: grey;
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
+            background-color: white;
+            border-color: grey;
+            box-shadow: none;
+            color: grey;
+        }
+    </style>
+
+  ```  
+
+## Custom Check Icon
+
+CheckBox check icon can be customized as per the requirement by adding CSS rules.
+
+In the following example, the check icon can be customized by changing check icon content, background and
+border color in focus and hovered states by adding `e-checkicon` class.
+
+`Index.razor`
+
+```csharp
+
+<ul>
+    <li>
+        <EjsCheckBox ID="cbox2" Label="Buy Groceries" Checked="true" CssClass="e-checkicon"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox3" Label="Pay Rent" Checked="true" CssClass="e-checkicon"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox4" Label="Make Dinner" CssClass="e-checkicon"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox1" Label="Finish To-do List Article" CssClass="e-checkicon"></EjsCheckBox>
+    </li>
+</ul>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+    <style>
+        li {
+            list-style: none;
+        }
+
+        .e-checkbox-wrapper {
+            margin-top: 18px;
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-frame.e-check::before {
+            content: '\e77d';
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-check {
+            font-size: 8px;
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-frame.e-check {
+            background-color: white;
+            border-color: grey;
+            color: grey;
+        }
+
+        .e-checkicon.e-checkbox-wrapper:hover .e-frame.e-check {
+            background-color: white;
+            border-color: grey;
+            color: grey;
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
+            background-color: white;
+            border-color: grey;
+            box-shadow: none;
+            color: grey;
+        }
+
+        .e-checkicon.e-checkbox-wrapper .e-ripple-element {
+            background: grey;
+        }
+    </style>
+
+  ```  
--- a/src/buttons/check-box/how-to/name-and-value-in-form-submit.md
+++ b/src/buttons/check-box/how-to/name-and-value-in-form-submit.md
@ -0,0 +1,58 @@
+---
+title: "Name and Value in form submit"
+component: "CheckBox"
+description: "CheckBox how to section, name and value in form submit, and customization of CheckBox appearance, frame & check icon."
+---
+
+# Name and Value in form submit
+
+The name attribute of the CheckBox is used to group Checkboxes. When the Checkboxes are grouped in form, the checked items value attribute
+will post to the server on form submit that can be retrieved through the name. The disabled and unchecked CheckBox
+value will not be sent to the server on form submit.
+
+In the following code snippet, Cricket and Hockey are in the checked state, Tennis is in disabled state and Basketball is in unchecked state.
+Now, the value that is in checked state only be sent on form submit.
+
+`Index.razor`
+
+```csharp
+
+<form>
+    <ul>
+        <li>
+            <EjsCheckBox ID="cbox2" Name="Sport" Value="Cricket" Label="Cricket" Checked="true"></EjsCheckBox>
+        </li>
+        <li>
+            <EjsCheckBox ID="cbox3" Name="Sport" Value="Hockey" Label="Hockey" Checked="true"></EjsCheckBox>
+        </li>
+        <li>
+            <EjsCheckBox ID="cbox4" Name="Sport" Value="Tennis" Label="Tennis"></EjsCheckBox>
+        </li>
+        <li>
+            <EjsCheckBox ID="cbox1" Name="Sport" Value="Basketball" Label="Basketball"></EjsCheckBox>
+        </li>
+        <li>
+            <EjsButton ID="primarybtn" Content="Submit" IsPrimary="true"></EjsButton>
+        </li>
+    </ul>
+</form>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+    <style>
+        .e-checkbox-wrapper {
+            margin-top: 18px;
+        }
+        button {
+            margin: 20px 0 0 5px;
+        }
+        li {
+            list-style: none;
+        }
+    </style>
+
+  ```
--- a/src/buttons/check-box/how-to/right-to-left.md
+++ b/src/buttons/check-box/how-to/right-to-left.md
@ -0,0 +1,19 @@
+---
+title: "Right-To-Left"
+component: "CheckBox"
+description: "CheckBox how to section, name and value in form submit, and customization of CheckBox appearance, frame & check icon."
+---
+
+# Right-To-Left
+
+CheckBox component has RTL support. This can be achieved by setting [`enableRtl`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/aspnetcore/Syncfusion.EJ2~Syncfusion.EJ2.Buttons.CheckBox~EnableRtl.html) as `true`.
+
+The following example illustrates how to enable right-to-left support in CheckBox component.
+
+`Index.razor`
+
+```csharp
+
+<EjsCheckBox ID="cbox2" Label="Default" Checked="true" EnableRtl="true"></EjsCheckBox>
+
+  ```
--- a/src/buttons/check-box/images/check-box.PNG
+++ b/src/buttons/check-box/images/check-box.PNG
--- a/src/buttons/check-box/images/import-cdn.png
+++ b/src/buttons/check-box/images/import-cdn.png
--- a/src/buttons/check-box/images/new-project.png
+++ b/src/buttons/check-box/images/new-project.png
--- a/src/buttons/check-box/images/nuget-explorer.png
+++ b/src/buttons/check-box/images/nuget-explorer.png
--- a/src/buttons/check-box/images/razor-components-template.png
+++ b/src/buttons/check-box/images/razor-components-template.png
--- a/src/buttons/check-box/images/select-nuget.png
+++ b/src/buttons/check-box/images/select-nuget.png
--- a/src/buttons/check-box/index.md
+++ b/src/buttons/check-box/index.md
@ -0,0 +1,10 @@
+# Overview
+
+The **CheckBox** is a graphical user interface element that allows you to select one or more options from the choices.
+It contains checked, unchecked, and indeterminate states.
+
+## Key Features
+
+* **Supports different states**
+* **Supports label and its position**
+* **Supports small size**
--- a/src/buttons/check-box/label-and-size.md
+++ b/src/buttons/check-box/label-and-size.md
@ -0,0 +1,86 @@
+---
+title: "CheckBox Label and Size"
+component: "CheckBox"
+description: "CheckBox control supports different sizes and label."
+---
+
+# Label and Size
+
+This section explains the different sizes and labels.
+
+## Label
+
+The CheckBox caption can be defined by using the [`label`](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsCheckBox~Label.html) property.
+This reduces the manual addition of label for CheckBox. You can customize the label position before or after the CheckBox
+through the [`labelPosition`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsCheckBox~LabelPosition.html) property.
+
+`Index.razor`
+
+```csharp
+
+<ul>
+    <li>
+        <EjsCheckBox ID="cbox1" Label="Left SIDe Label" LabelPosition="@Syncfusion.EJ2.RazorComponents.Buttons.LabelPosition.Before"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox2" Label="Right SIDe Label" LabelPosition="@Syncfusion.EJ2.RazorComponents.Buttons.LabelPosition.After" Checked="true"></EjsCheckBox>
+    </li>
+</ul>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+     <style >
+        .e-checkbox-wrapper {
+            margin-top: 18px;
+        }
+
+        li {
+            list-style: none;
+        }
+    </style>
+
+  ```  
+
+## Size
+
+The different CheckBox sizes available are default and small. To reduce the size of default CheckBox to small,
+set the [`cssClass`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.Buttons.EjsCheckBox~CssClass.html) property to `e-small`.
+
+`Index.razor`
+
+```csharp
+
+<ul>
+    <li>
+        <EjsCheckBox ID="cbox3" Label="Small" CssClass="e-small"></EjsCheckBox>
+    </li>
+    <li>
+        <EjsCheckBox ID="cbox4" Label="Default"></EjsCheckBox>
+    </li>
+</ul>
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+     <style >
+        .e-checkbox-wrapper {
+            margin-top: 18px;
+        }
+
+        li {
+            list-style: none;
+        }
+    </style>
+
+  ```  
+
+## See Also
+
+* [CheckBox customization](./how-to/customized-checkbox)
--- a/src/buttons/check-box/native-event.md
+++ b/src/buttons/check-box/native-event.md
@ -0,0 +1,47 @@
+---
+title: "Native Event"
+component: "CheckBox"
+description: "This section helps to learn how to trigger the native events in ASP.NET Core Razor application"
+---
+
+# Overview
+
+You can define the native event using on`<event>` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments.
+
+The different event argument types for each event are,
+
+* Focus Events - UIFocusEventArgs
+* Mouse Events - UIMouseEventArgs
+* Drag Events - UIDragEventArgs
+* Keyboard Events - UIKeyboardEventArgs
+* Input Events - UIChangeEventArgs/UIEventArgs
+* Touch Events – UITouchEventArgs
+* Clipboard Events - UIClipboardEventArgs
+
+## List of Native events supported
+
+We have provided the following native event support to the CheckBox component:
+
+| List of Native events |  |  | | |
+| --- | --- | --- | --- | --- |
+| onchange | oninput | onblur | onfocusout | onfocusin |
+|onfocus|onclick|onkeydown|onkeyup|onkeypress|
+
+## How to bind onchange event to CheckBox
+
+The ‘onchange’ attribute is used to bind the onchange event for checkbox. Here, we have explained about the sample code snippets of checkbox.
+
+`Default.razor`
+
+```csharp
+@using Syncfusion.EJ2.RazorComponents.Buttons
+
+<EjsCheckBox Label="onchange" Onchange="@onchange"></EjsCheckBox>
+
+@code {
+    private void onchange(UIChangeEventArgs args)
+    {
+       //onChange Event triggered
+    }
+}
+```
--- a/src/buttons/check-box/summary.md
+++ b/src/buttons/check-box/summary.md
@ -0,0 +1,7 @@
+* [Getting Started](check-box/getting-started.md)
+* [Native Events](check-box/native-event.md)  
+* [Label and Size](check-box/label-and-size.md)
+* [Accessibility](check-box/accessibility.md)
+* [Customized CheckBox](check-box/how-to/customized-checkbox.md)
+* [Name and Value in form submit](check-box/how-to/name-and-value-in-form-submit.md)
+* [Right-To-Left](check-box/how-to/right-to-left.md)
--- a/src/buttons/chip/accessibility.md
+++ b/src/buttons/chip/accessibility.md
@ -0,0 +1,44 @@
+# Accessibility
+
+## Keyboard Interaction
+
+The following shortcut keys are used to access the Chip control without any interruption.
+
+| Keyboard shortcuts | Actions |
+|------------|-------------------|
+| <kbd>Enter</kbd> | Selects the targeted chip from the ChipList/ChipCollection. |
+| <kbd>Delete</kbd> | Deletes the targeted chip from the ChipList/ChipCollection. |
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList EnableDelete="true" Selection="Selection.Single" CssClass ="chip-avatar">
+    <ChipCollection>
+        <ChipListChip Text="Andrew" AvatarIconCss='andrew'></ChipListChip>
+        <ChipListChip Text="Janet" AvatarIconCss='janet'></ChipListChip>
+        <ChipListChip Text="Laura" AvatarIconCss='laura'></ChipListChip>
+        <ChipListChip Text="Margaret" AvatarIconCss='margaret'></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+<style>
+    .chip-avatar .andrew {
+        background-image: url('./andrew.png')
+    }
+    .chip-avatar .margaret {
+        background-image: url('./margaret.png')
+    }
+    .chip-avatar .laura {
+        background-image: url('./laura.png')
+    }
+    .chip-avatar .janet {
+        background-image: url('./janet.png')
+    }
+</style>
+
+```
+
+Output be like the below.
+
+![Chip with avatarIcon and selection](./images/accessibility.gif)
--- a/src/buttons/chip/customization.md
+++ b/src/buttons/chip/customization.md
@ -0,0 +1,181 @@
+# Chip Customization
+
+This section explains the customization of styles, leading icons, avatar, and trailing icons in Chip control.
+
+## Styles
+
+The Chip control 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. |
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList>
+    <ChipCollection>
+                <ChipListChip Text="Default"></ChipListChip>
+                <ChipListChip Text="Primary" CssClass="e-primary"></ChipListChip>
+                <ChipListChip Text="Success" CssClass="e-success"></ChipListChip>
+                <ChipListChip Text="Info" CssClass="e-info"></ChipListChip>
+                <ChipListChip Text="Warning" CssClass="e-warning"></ChipListChip>
+                <ChipListChip Text="Danger" CssClass="e-danger"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+```
+
+Output be like the below.
+
+![Chip Styles](./images/styleChip.png)
+
+## Leading Icon
+
+You can add and customize the leading icon of chip using the `LeadingIconCss` property.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList EnableDelete="true" CssClass="chip-avatar">
+    <ChipCollection>
+        <ChipListChip Text="Anne" LeadingIconCss="anne"></ChipListChip>
+        <ChipListChip Text="Janet" LeadingIconCss="janet"></ChipListChip>
+        <ChipListChip Text="Laura" LeadingIconCss="laura"></ChipListChip>
+        <ChipListChip Text="Margaret" LeadingIconCss="margaret"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+<style>
+    .chip-avatar .anne {
+        background-image: url('./anne.png')
+    }
+    .chip-avatar .margaret {
+        background-image: url('./margaret.png')
+    }
+    .chip-avatar .laura {
+        background-image: url('./laura.png')
+    }
+    .chip-avatar .janet {
+        background-image: url('./janet.png')
+    }
+</style>
+
+```
+
+Output be like the below.
+
+![Chip LeadingIcon](./images/leadingIcon.gif)
+
+## Avatar
+
+You can add and customize the avatar of chip using the `AvatarIconCss` property.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList EnableDelete="true" CssClass="chip-avatar">
+    <ChipCollection>
+        <ChipListChip Text="Andrew" AvatarIconCss="andrew"></ChipListChip>
+        <ChipListChip Text="Janet" AvatarIconCss="janet"></ChipListChip>
+        <ChipListChip Text="Laura" AvatarIconCss="laura"></ChipListChip>
+        <ChipListChip Text="Margaret" AvatarIconCss="margaret"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+<style>
+    .chip-avatar .andrew {
+        background-image: url('./andrew.png')
+    }
+    .chip-avatar .margaret {
+        background-image: url('./margaret.png')
+    }
+    .chip-avatar .laura {
+        background-image: url('./laura.png')
+    }
+    .chip-avatar .janet {
+        background-image: url('./janet.png')
+    }
+</style>
+
+```
+
+Output be like the below.
+
+![Chip Avatar Icon](./images/avatar.gif)
+
+## Avatar Content
+
+You can add and customize the avatar content of chip using the `AvatarText` property.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList EnableDelete="true">
+    <ChipCollection>
+        <ChipListChip Text="Andrew" AvatarText="A"></ChipListChip>
+        <ChipListChip Text="Janet" AvatarText="J"></ChipListChip>
+        <ChipListChip Text="Laura" AvatarText="L"></ChipListChip>
+        <ChipListChip Text="Margaret" AvatarText="M"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+```
+
+Output be like the below.
+
+![Chip Avatar Text](./images/avatarcontent.gif)
+
+## Trailing Icon
+
+You can add and customize the trailing icon of chip using the `TrailingIconCss` property.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList>
+    <ChipCollection>
+        <ChipListChip Text="Andrew" TrailingIconCss="e-dlt-btn"></ChipListChip>
+        <ChipListChip Text="Janet" TrailingIconCss="e-dlt-btn"></ChipListChip>
+        <ChipListChip Text="Laura" TrailingIconCss="e-dlt-btn"></ChipListChip>
+        <ChipListChip Text="Margaret" TrailingIconCss="e-dlt-btn"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+```
+
+Output be like the below.
+
+![Chip TrailingIcon](./images/trailingIcon.png)
+
+## Outline Chip
+
+Outline chip has the border with the background transparent. It can be set using the `CssClass` property.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList EnableDelete="true" CssClass="e-outline">
+    <ChipCollection>
+        <ChipListChip Text="Andrew"></ChipListChip>
+        <ChipListChip Text="Janet"></ChipListChip>
+        <ChipListChip Text="Laura"></ChipListChip>
+        <ChipListChip Text="Margaret"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+```
+
+Output be like the below.
+
+![Chip Outline](./images/outlinechip.gif)
--- a/src/buttons/chip/getting-started.md
+++ b/src/buttons/chip/getting-started.md
@ -0,0 +1,63 @@
+---
+title: "Getting Started"
+component: "Chip"
+description: "Learn how to create an Blazor Chip control in ASP.NET Razor application."
+---
+
+# Getting Started
+
+This section briefly explains about how to include a simple Chip in your ASP.NET Core Razor application. You can refer [ASP.NET Core Razor Getting Started documentation](../getting-started/dotnet-cli-blazor) page for introduction part of the system requirements and configure the common specifications.
+
+## Importing Syncfusion Blazor component in the application
+
+1. Install `Syncfusion.EJ2.Blazor` NuGet package to the application by using the NuGet Package Manager.
+2. You can add the client-side resources through CDN or local npm package in the `<head>` element of the `~/wwwroot/index.html` page.
+
+```csharp
+
+<head>
+    <link href="https://cdn.syncfusion.com/ej2/{:version:}/material.css" rel="stylesheet" />
+    <script src="https://cdn.syncfusion.com/ej2/{:version:}/dist/ej2.min.js"></script>
+    <script src="https://cdn.syncfusion.com/ej2/{:version:}/dist/ejs.interop.min.js"></script>
+</head>
+
+```
+
+## Adding component package to the application
+
+Open `~/_Imports.razor` file and import the `Syncfusion.EJ2.Blazor.Buttons` packages.
+
+ ```csharp
+
+@using Syncfusion.EJ2.Blazor
+@using Syncfusion.EJ2.Blazor.Buttons
+
+```
+
+## Adding Chip component to the application
+
+Now, add the Syncfusion Blazor Chip component in any web page `razor` in the `Pages` folder. For example, the Chip component is added in the `~/Pages/Index.razor` page.
+
+```csharp
+
+    @using Syncfusion.EJ2.Blazor.Buttons
+
+    <EjsChipList Text="Janet Leverling"></EjsChipList>
+
+```
+
+## Run the application
+
+ After successful compilation of your application, simply press `F5` to run the application.
+
+Output be like the below.
+
+![Chip Sample](./images/chip.png)
+
+## See Also
+
+[Getting Started with Syncfusion Blazor for Client-Side in Visual Studio 2019 Preview](https://ej2.syncfusion.com/aspnet-core-blazor/documentation/getting-started/vs-blazor/)
+
+[Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 Preview](https://ej2.syncfusion.com/aspnet-core-blazor/documentation/getting-started/vs-blazor-server/)
+
+[Getting Started with Syncfusion Blazor for Server-Side in .NET Core CLI](https://ej2.syncfusion.com/aspnet-core-blazor/documentation/getting-started/dotnet-cli-blazor-server/)
--- a/src/buttons/chip/images/accessibility.gif
+++ b/src/buttons/chip/images/accessibility.gif
--- a/src/buttons/chip/images/actionchip.gif
+++ b/src/buttons/chip/images/actionchip.gif
--- a/src/buttons/chip/images/avatar.gif
+++ b/src/buttons/chip/images/avatar.gif
--- a/src/buttons/chip/images/avatarcontent.gif
+++ b/src/buttons/chip/images/avatarcontent.gif
--- a/src/buttons/chip/images/chip.png
+++ b/src/buttons/chip/images/chip.png
--- a/src/buttons/chip/images/choicechip.gif
+++ b/src/buttons/chip/images/choicechip.gif
--- a/src/buttons/chip/images/deletablechip.gif
+++ b/src/buttons/chip/images/deletablechip.gif
--- a/src/buttons/chip/images/filterchip.gif
+++ b/src/buttons/chip/images/filterchip.gif
--- a/src/buttons/chip/images/frame-work.png
+++ b/src/buttons/chip/images/frame-work.png
--- a/src/buttons/chip/images/import-cdn.png
+++ b/src/buttons/chip/images/import-cdn.png
--- a/src/buttons/chip/images/inputChips.png
+++ b/src/buttons/chip/images/inputChips.png
--- a/src/buttons/chip/images/leadingIcon.gif
+++ b/src/buttons/chip/images/leadingIcon.gif
--- a/src/buttons/chip/images/new-project.png
+++ b/src/buttons/chip/images/new-project.png
--- a/src/buttons/chip/images/nuget-explorer.png
+++ b/src/buttons/chip/images/nuget-explorer.png
--- a/src/buttons/chip/images/outlinechip.gif
+++ b/src/buttons/chip/images/outlinechip.gif
--- a/src/buttons/chip/images/select-nuget.png
+++ b/src/buttons/chip/images/select-nuget.png
--- a/src/buttons/chip/images/styleChip.png
+++ b/src/buttons/chip/images/styleChip.png
--- a/src/buttons/chip/images/trailingIcon.png
+++ b/src/buttons/chip/images/trailingIcon.png
--- a/src/buttons/chip/index.md
+++ b/src/buttons/chip/index.md
@ -0,0 +1,3 @@
+# Overview
+
+The chip is a small block of essential information that triggers an event on click action. It contains the text, image, or both and mostly used in contacts, mails, or filter tags.
--- a/src/buttons/chip/summary.md
+++ b/src/buttons/chip/summary.md
@ -0,0 +1,6 @@
+# Summary
+
+* [Getting Started](chip/getting-started.md)
+* [Types](chip/types.md)
+* [Customization](chip/customization.md)
+* [Accessibility](chip/accessibility.md)
--- a/src/buttons/chip/types.md
+++ b/src/buttons/chip/types.md
@ -0,0 +1,149 @@
+# Types
+
+The ChipList control has the following types.
+
+* Input Chip
+* Choice Chip
+* Filter Chip
+* Action Chip
+
+## Input Chip
+
+Input Chip holds information in compact form. It converts user input into chips.
+
+```csharp
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList>
+    <ChipCollection>
+        <ChipListChip Text="Anne" LeadingIconCss="anne"></ChipListChip>
+        <ChipListChip Text="Janet" LeadingIconCss="janet"></ChipListChip>
+        <ChipListChip Text="Laura" LeadingIconCss="laura"></ChipListChip>
+        <ChipListChip Text="Margaret" LeadingIconCss="margaret"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+<style>
+    .anne {
+        background-image: url('./anne.png');
+    }
+    .janet {
+        background-image: url('./janet.png');
+    }
+    .laura {
+        background-image: url('./laura.png');
+    }
+    .margaret {
+        background-image: url('./margaret.png');
+    }
+</style>
+
+```
+
+Output be like the below.
+
+![Chip inputs](./images/inputChips.png)
+
+## Choice Chip
+
+Choice Chip allows you to select a single chip from the set of ChipList/ChipCollection. It can be enabled by setting the `Selection` property to `Single`.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList Selection="Selection.Single">
+    <ChipCollection>
+        <ChipListChip Text="Small"></ChipListChip>
+        <ChipListChip Text="Medium"></ChipListChip>
+        <ChipListChip Text="Large"></ChipListChip>
+        <ChipListChip Text="Extra Large"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+```
+
+Output be like the below.
+
+![Chip Choice](./images/choicechip.gif)
+
+## Filter Chip
+
+Filter Chip allows you to select a multiple chip from the set of ChipList/ChipCollection. It can be enabled by setting the `Selection` property to `Multiple`.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList Selection="Selection.Multiple">
+    <ChipCollection>
+      <ChipListChip Text="Chai"></ChipListChip>
+      <ChipListChip Text="Chang"></ChipListChip>
+      <ChipListChip Text="Aniseed Syrup"></ChipListChip>
+      <ChipListChip Text="Ikura"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+```
+
+Output be like the below.
+
+![Chip Filter](./images/filterchip.gif)
+
+## Action Chip
+
+The Action Chip triggers the event like click or delete, which helps doing action based on the event.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList>
+    <ChipListEvents OnClick="@OnClick"></ChipListEvents>
+    <ChipCollection>
+        <ChipListChip Text="Sent a text"></ChipListChip>
+        <ChipListChip Text="Set a remainder"></ChipListChip>
+        <ChipListChip Text="Read my emails"></ChipListChip>
+        <ChipListChip Text="Set alarm"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+<div>@ChipText</div>
+
+@code
+{
+    public string ChipText = "";
+    private void OnClick(ClickEventArgs args)
+    {
+        ChipText = args.Text;
+        this.StateHasChanged();
+    }
+}
+
+```
+
+Output be like the below.
+
+![Chip Action](./images/actionchip.gif)
+
+### Deletable Chip
+
+Deletable Chip allows you to delete a chip from ChipList/ChipCollection. It can be enabled by setting the `EnableDelete` property to `true`.
+
+```csharp
+
+@using Syncfusion.EJ2.Blazor.Buttons
+
+<EjsChipList EnableDelete="true">
+    <ChipCollection>
+        <ChipListChip Text="Sent a text"></ChipListChip>
+        <ChipListChip Text="Set a remainder"></ChipListChip>
+        <ChipListChip Text="Read my emails"></ChipListChip>
+        <ChipListChip Text="Set alarm"></ChipListChip>
+    </ChipCollection>
+</EjsChipList>
+
+```
+
+Output be like the below.
+
+![Chip Delete](./images/deletablechip.gif)
--- a/src/buttons/drop-down-button/accessibility.md
+++ b/src/buttons/drop-down-button/accessibility.md
@ -0,0 +1,159 @@
+---
+title: "DropDownButton Accessibility"
+component: "DropDownButton"
+description: "DropDownButton control has accessibility support to help access the features via keyboard, on-screen readers, or other assistive technology devices."
+---
+
+# Accessibility
+
+## ARIA attributes
+
+The web accessibility makes web content and web applications more accessible for people with disabilities. Mostly it helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies.
+DropDownButton provides built-in compliance with `WAI-ARIA` specifications. `WAI-ARIA` support is achieved through the attributes like `aria-expanded`, `aria-owns` and `aria-haspopup` applied for action item in
+DropDownButton. It helps by providing information about the widget for assistive
+technology in the screen readers. DropDownButton component contains the `menu` role and `menuItem` role.
+
+| Properties | Functionality |
+| ------------ | ----------------------- |
+| menu | Specified for an DropDownButton element. |
+| menuItem | Specified for an action items. |
+| aria-haspopup | Indicates the availability and type of interactive dropdown popup element. |
+| aria-expanded | Indicates whether the current state of the dropdown popup can be expanded or collapsed. |
+| aria-owns | Identifies elements to define a visual, functional, or contextual parent or child relationship between DOM(Document Object Model) elements where the hierarchy cannot be used to represent the relationship. |
+
+## Keyboard interaction
+
+<!-- markdownlint-disable MD033 -->
+<table>
+<tr>
+<td>
+<b>Keyboard shortcuts</b></td><td>
+<b>Actions</b></td></tr>
+<tr>
+<td>
+<kbd>Esc</kbd></td><td>
+Closes the popup.</td></tr>
+<tr>
+<td>
+<kbd>Enter</kbd></td><td>
+Opens the popup, or activates the highlighted item and closes the popup.</td></tr>
+<tr>
+<td>
+<kbd>Space</kbd></td><td>
+Opens the popup.</td></tr>
+<tr>
+<td>
+<kbd>Up</kbd></td><td>
+Navigates up or to the previous action item.</td></tr>
+<tr>
+<td>
+<kbd>Down</kbd></td><td>
+Navigates down or to the next action item.</td></tr>
+<tr>
+<td>
+<kbd>Alt + Up Arrow</kbd></td><td>
+Closes the popup.</td></tr>
+<tr>
+<td>
+<kbd>Alt + Down Arrow</kbd></td><td>
+Opens the popup</td></tr>
+</table>
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="element" Content="Edit" IconCss="e-icons e-edit" Items="@items"></EjsDropDownButton>
+
+
+@functions {
+
+    List<object> items = new List<object>
+     {
+            new {  text = "Cut", iconCss = "e-db-icons e-cut" },
+            new {  text = "Copy", iconCss = "e-icons e-copy" },
+            new {  text = "Paste", iconCss = "e-db-icons e-paste" },
+            new {  separator = "true" },
+            new {  text = "Font", iconCss = "e-db-icons e-font" },
+            new {  text = "Paragraph", iconCss = "e-db-icons e-paragraph" },
+        };
+}
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+<style>
+
+    /* csslint ignore:start */
+    @@font-face {
+        font-family: 'e-dropdown-btn';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    /* csslint ignore:stop */
+    .e-ddb-icons {
+        font-family: 'e-dropdown-btn';
+        font-style: normal;
+        font-variant: normal;
+        font-weight: normal;
+        line-height: 1;
+        text-transform: none;
+    }
+
+    /* csslint ignore:start */
+    @@font-face {
+        font-family: 'ddb-icons';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+    /* csslint ignore:stop */
+
+    .e-db-icons {
+        font-family: 'ddb-icons' !important;
+        speak: none;
+        font-size: 55px;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .e-edit::before {
+        content: '\ea9a';
+    }
+
+    .e-cut::before {
+        content: '\e700';
+    }
+
+    .e-copy::before {
+        content: '\e70a';
+    }
+
+    .e-paste::before {
+        content: '\e701';
+    }
+
+    .e-font::before {
+        content: '\e702';
+    }
+
+    .e-paragraph::before {
+        content: '\e703';
+    }
+
+    button {
+        margin: 25px 5px 20px 20px;
+    }
+</style>
+
+  ```
--- a/src/buttons/drop-down-button/getting-started.md
+++ b/src/buttons/drop-down-button/getting-started.md
@ -0,0 +1,71 @@
+---
+title: "Getting Started"
+component: "DropDownButton"
+description: "This section helps to learn how to create the DropDownButton in ASP.NET Core Razor application with its basic features in step-by-step procedure."
+---
+
+<!-- markdownlint-disable MD024 -->
+
+# Getting Started with Essential JS 2 for ASP.NET Core Razor DropDownButton Component in Visual Studio 2019
+
+This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor DropDownButton Component web application using the [Visual Studio 2019](https://visualstudio.microsoft.com/vs/preview/).
+
+## Prerequisites
+
+The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the [.NET Core Razor components documentation website](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio).
+
+* [Visual Studio 2019 Preview](https://visualstudio.microsoft.com/vs/preview/) with the ASP.NET and web development workload
+* [.NET Core SDK 3.0 Preview](https://dotnet.microsoft.com/download/dotnet-core/3.0)
+
+## Create a Razor Component application from VS 2019
+
+1. Choose **File > New > Project...** in the Visual Studio menu bar.
+
+    ![new project in aspnetcore razor](images/new-project.png)
+
+2. Make sure **.NET Core** and **ASP.NET Core 3.0** are selected at the top.
+
+    ![select framework](images/razor-components-template.png)
+
+3. Choose the **Razor Components** template and change the application name, and then click **OK**.
+
+## Importing Essential JS 2 Razor components in the application
+
+1. Now, add the **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.
+
+    ![nuget explorer](images/nuget-explorer.png)
+
+2. Search the **Syncfusion.EJ2.AspNet.Core.RazorComponents** keyword in the Browse tab and install **Syncfusion.EJ2.AspNet.Core.RazorComponents** NuGet package in the application.
+
+    ![select nuget](images/select-nuget.png)
+
+3. The Essential JS 2 package will be included in the project, after the installation process is completed.
+
+4. Open **~/_ViewImports.cshtml** file and import the `Syncfusion.EJ2.RazorComponents`.
+
+    ```cshtml
+    @addTagHelper *, Syncfusion.EJ2.RazorComponents
+    ```
+
+5. Add the client-side resources through CDN or local npm package in the `<head>` element of the **~/wwwroot/index.html** page.
+
+    ![import cdn](images/import-cdn.png)
+
+6. Now, add the Syncfusion Essential JS 2 DropDownButton component in any web page (cshtml) in the `Pages` folder. For example, the DropDownButton component is added in the **~/Pages/Index.cshtml** page.
+
+    ```cshtml
+    <EjsDropDownButton ID="element" Content="Edit" Items="@items"></EjsDropDownButton>
+
+    @code {
+        public List<object> items { get; set; } = new List<object>
+        {
+            new { text = "Cut" },
+            new { text = "Copy" },
+            new { text = "Paste" }
+        };
+    }
+    ```
+
+7. Run the application. The Essential JS 2 DropDownButton component will render in the web browser.
+
+    ![DropDownButton Sample](./images/drop-down-button.png)
--- a/src/buttons/drop-down-button/how-to/change-caret-icon.md
+++ b/src/buttons/drop-down-button/how-to/change-caret-icon.md
@ -0,0 +1,64 @@
+---
+title: "Change caret icon"
+component: "DropDownButton"
+description: "DropDownButton how to section, hide drop down arrow, group popup items using list view component, dialog open on popup item click."
+---
+
+# Change caret icon
+
+Dropdown arrow can be customized on popup open and close. It can be handled in
+[`beforeOpen`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~BeforeOpen.html) and
+[`beforeClose`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~BeforeClose.html) event.
+
+In the following example, the up arrow is updated on popup close and down arrow is updated
+on popup open using `beforeOpen` and `beforeClose` event by adding and removing
+`e-caret-up` class.
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="ddbtn" ref="ddbtn" Items="@items" Content="Clipboard" BeforeOpen="@beforeOpen" BeforeClose="@beforeClose"></EjsDropDownButton>
+
+@functions {
+
+    List<object> items = new List<object>
+     {
+            new { text = "Edit" },
+            new { text = "Copy" },
+            new { text = "Paste" }
+
+        };
+    EjsDropDownButton ddbtn;
+    public string iconCss = "e-caret-up";
+    private void beforeOpen(BeforeOpenCloseMenuEventArgs args)
+    {
+        ddbtn.CssClass = this.iconCss;
+        ddbtn.DataBind();
+    }
+
+      private void beforeClose(BeforeOpenCloseMenuEventArgs args)
+    {
+         ddbtn.CssClass = "";
+         ddbtn.DataBind();
+    }
+
+}
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+<style>
+    .e-caret {
+        transform: rotate(0deg);
+        transition: transform 200ms ease-in-out;
+    }
+
+    .e-caret-up .e-caret {
+        transform: rotate(180deg);
+    }
+</style>
+
+  ```
--- a/src/buttons/drop-down-button/how-to/create-dropdownbutton-with-rounded-corner.md
+++ b/src/buttons/drop-down-button/how-to/create-dropdownbutton-with-rounded-corner.md
@ -0,0 +1,43 @@
+---
+title: "Create DropDownButton with rounded corner"
+component: "DropDownButton"
+description: "DropDownButton how to section, hide drop down arrow, group popup items using list view component, dialog open on popup item click."
+---
+
+# Create DropDownButton with rounded corner
+
+DropDownButton with rounded corner can be achieved by adding `border-radius` CSS property to button element.
+
+In the following example, `e-round-corner` class is defined with `5px` `border-radius`
+property and added that class to button element using
+[`cssClass`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~CssClass.html) property.
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="ddbtn" Items="@items" cssClass="e-round-corner" Content="Clipboard"></EjsDropDownButton>
+
+@functions {
+
+    List<object> items = new List<object>
+     {
+            new { text = "Edit" },
+            new { text = "Copy" },
+            new { text = "Paste" }
+
+        };
+}
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+<style>
+    .e-round-corner {
+        border-radius: 5px;
+    }
+</style
+
+  ```
--- a/src/buttons/drop-down-button/how-to/create-right-to-left-dropdownbutton.md
+++ b/src/buttons/drop-down-button/how-to/create-right-to-left-dropdownbutton.md
@ -0,0 +1,69 @@
+---
+title: "Create right-to-left DropDownButton"
+component: "DropDownButton"
+description: "DropDownButton how to section, hide drop down arrow, group popup items using list view component, dialog open on popup item click."
+---
+
+# Create right-to-left DropDownButton
+
+DropDownButton component has RTL support. This can be achieved by setting [`enableRtl`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~EnableRtl.html) as true.
+
+The following example illustrates how to enable right-to-left support in DropDownButton component.
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="rtl" Items="@items" Content="Message" IconCss="ddb-icons e-message" EnableRtl="true"></EjsDropDownButton>
+
+@functions {
+
+   List<object> items = new List<object>
+     {
+            new { text = "Edit" },
+            new { text = "Delete" },
+            new { text = "Mark as Read" },
+             new { text = "Like Message" }
+
+        };
+}
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+<style>
+
+    /* csslint ignore:start */
+    @@font-face {
+        font-family: 'e-db-icons';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+    /* csslint ignore:stop */
+
+    .ddb-icons {
+        font-family: 'e-db-icons' !important;
+        speak: none;
+        font-size: 55px;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .e-message::before {
+        content: '\e703';
+    }
+
+    button {
+        margin: 25px 5px 20px 20px;
+    }
+</style>
+
+  ```
--- a/src/buttons/drop-down-button/how-to/customize-icon-and-width.md
+++ b/src/buttons/drop-down-button/how-to/customize-icon-and-width.md
@ -0,0 +1,67 @@
+---
+title: "Customize icon and width"
+component: "DropDownButton"
+description: "DropDownButton how to section, hide drop down arrow, group popup items using list view component, dialog open on popup item click."
+---
+
+# Customize icon and width
+
+Width of the DropDownButton can be customized by setting required width to the dropdown element.
+
+The following UI can be achieved by setting
+[`iconPosition`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~IconPosition.html) as `Top`, width as `85px`
+and size of the font icon as `40px` by adding `e-custom` class.
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="rtl" Items="@items" Content="Search" IconCss="e-icons e-search" CssClass = "e-custom" IconPosition ="@Syncfusion.EJ2.RazorComponents.SplitButtons.SplitButtonIconPosition.Top"></EjsDropDownButton>
+
+@functions {
+
+      List<object> items = new List<object>
+     {
+            new { text = "Find" },
+            new { text = "Replace" },
+            new { text = "Go To" },
+             new { text = "Go To Special" }
+
+        };
+
+}
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+<style>
+
+    /* csslint ignore:start */
+    @@font-face {
+        font-family: 'e-db-icons';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+    /* csslint ignore:stop */
+
+    .e-search::before {
+  content: '\e993';
+}
+
+button {
+  margin: 25px 5px 20px 20px;
+}
+
+.e-dropdown-btn.e-custom {
+  width: 85px;
+}
+
+.e-dropdown-btn.e-custom .e-search::before {
+  font-size: 40px;
+}
+</style>
+
+  ```
--- a/src/buttons/drop-down-button/how-to/disable-a-dropdownbutton.md
+++ b/src/buttons/drop-down-button/how-to/disable-a-dropdownbutton.md
@ -0,0 +1,29 @@
+---
+title: "Disable a DropDownButton"
+component: "DropDownButton"
+description: "DropDownButton how to section, hide drop down arrow, group popup items using list view component, dialog open on popup item click."
+---
+
+# Disable a DropDownButton
+
+DropdownButton component can be enabled/disabled by giving [`disabled`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~Disabled.html) property.
+To disable DropdownButton component, the disabled property can be set as `true`.
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="disabled" Items="@items" Content="Message" IconCss="e-icons e-search" Disabled="true"></EjsDropDownButton>
+
+@functions {
+
+    List<object> items = new List<object>
+     {
+            new { text = "Edit" },
+            new { text = "Delete" },
+            new { text = "Mark as Read" },
+            new { text = "Like Message" }
+
+        };
+}
+  ```
--- a/src/buttons/drop-down-button/how-to/hide-dropdown-arrow.md
+++ b/src/buttons/drop-down-button/how-to/hide-dropdown-arrow.md
@ -0,0 +1,31 @@
+---
+title: "Hide dropdown arrow"
+component: "DropDownButton"
+description: "DropDownButton how to section, hide drop down arrow, group popup items using list view component, dialog open on popup item click."
+---
+
+# Hide dropdown arrow
+
+You can hide the dropdown arrow from the DropDownButton by adding class `e-caret-hide`
+to DropDownButton element using [`cssClass`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~CssClass.html)
+property.
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="hide-arrow" Items="@items" Content="Message" CssClass="e-caret-hide"></EjsDropDownButton>
+
+@functions {
+
+    List<object> items = new List<object>
+     {
+            new { text = "Edit" },
+            new { text = "Delete" },
+            new { text = "Mark as Read" },
+             new { text = "Like Message" }  
+
+    };
+
+}
+  ```
--- a/src/buttons/drop-down-button/how-to/position-popup-open.md
+++ b/src/buttons/drop-down-button/how-to/position-popup-open.md
@ -0,0 +1,15 @@
+---
+title: "Position popup open"
+component: "DropDownButton"
+description: "DropDownButton how to section, hide drop down arrow, group popup items using list view component, dialog open on popup item click."
+---
+
+# Position popup open
+
+Popup open position can be changed according to the requirement. Popup open position can be changed in [`open`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/aspnetcore/Syncfusion.EJ2~Syncfusion.EJ2.SplitButtons.DropDownButton~open.html) event by setting `top` and `left` for the popup element.
+
+In the following example, the `top` position of the popup element is changed in `open` event.
+
+{% aspTab template="dropdownbutton/position", sourceFiles="position.cs" %}
+
+{% endaspTab %}
--- a/src/buttons/drop-down-button/icons.md
+++ b/src/buttons/drop-down-button/icons.md
@ -0,0 +1,144 @@
+---
+title: "DropDownButton Icons"
+component: "DropDownButton"
+description: "DropDownButton allows the end user to place the icons/sprite images in DropDownButton."
+---
+
+# Icons and Styles
+
+## DropDownButton icons
+
+DropDownButton can have an icon to provide the visual representation of the action. To place the icon on a DropDownButton,
+set the [`iconCss`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~IconCss.html) property to `e-icons` with the required icon CSS. By default,
+the icon is positioned to the left side of the DropDownButton. You can customize the icon's position using
+the [`iconPosition`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~IconPosition.html) property.
+
+In the following example, the DropDownButton with default iconPosition and iconPosition as `Top` is showcased:
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="left-icon" Content="Message" Items="@items" IconCss="ddb-icons e-message"></EjsDropDownButton>
+<EjsDropDownButton ID="top-icon" Content="Message" Items="@items" IconCss="ddb-icons e-message" IconPosition="@Syncfusion.EJ2.RazorComponents.SplitButtons.SplitButtonIconPosition.Top"></EjsDropDownButton>
+
+@functions {
+
+    List<object> items = new List<object>
+     {
+            new { text = "Edit" },
+            new { text = "Delete" },
+            new { text = "Mark as Read" },
+            new { text = "Like Message" },
+
+        };
+}
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+<style>
+    /* csslint ignore:start */
+    @@font-face {
+        font-family: 'e-db-icons';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+    /* csslint ignore:stop */
+
+    .ddb-icons {
+        font-family: 'e-db-icons' !important;
+        speak: none;
+        font-size: 55px;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .e-message::before {
+        content: '\e703';
+    }
+
+    button {
+        margin: 25px 5px 20px 20px;
+    }
+</style>
+
+  ```
+
+> The Essential JS 2 provides a set of icons that can be loaded by applying `e-icons` class name to the element.
+You can also use third party icons on the DropDownButton using the [`iconCss`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~IconCss.html) property.
+
+### Vertical button
+
+Vertical button in DropDownButton can be achieved by adding `e-vertical` class using [`cssClass`](https://help.syncfusion.com/cr/cref_files/aspnetcore-blazor/Syncfusion.EJ2.RazorComponents~Syncfusion.EJ2.RazorComponents.SplitButtons.EjsDropDownButton~CssClass.html) property.
+
+`Index.razor`
+
+```csharp
+
+<EjsDropDownButton ID="vertical-btn" Content="Message" Items="@items" IconCss="ddb-icons e-message"></EjsDropDownButton>
+
+@functions {
+
+    List<object> items = new List<object>
+     {
+            new { text = "Edit" },
+            new { text = "Delete" },
+            new { text = "Mark as Read" },
+            new { text = "Like Message" },
+        };
+}
+
+  ```
+
+  `_Host.cshtml`
+
+   ```html
+
+<style>
+    /* csslint ignore:start */
+    @@font-face {
+        font-family: 'e-db-icons';
+        src:
+        url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+    /* csslint ignore:stop */
+
+    .ddb-icons {
+        font-family: 'e-db-icons' !important;
+        speak: none;
+        font-size: 55px;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .e-message::before {
+        content: '\e703';
+    }
+
+    button {
+        margin: 25px 5px 20px 20px;
+    }
+</style>
+
+  ```
+
+## See Also
+
+* [Dropdown popup with icons](./popup-items#icons)
+* [Customized icon size](./how-to/customize-icon-and-width)
--- a/src/buttons/drop-down-button/images/drop-down-button.PNG
+++ b/src/buttons/drop-down-button/images/drop-down-button.PNG
--- a/src/buttons/drop-down-button/images/import-cdn.png
+++ b/src/buttons/drop-down-button/images/import-cdn.png
--- a/src/buttons/drop-down-button/images/new-project.png
+++ b/src/buttons/drop-down-button/images/new-project.png
--- a/src/buttons/drop-down-button/images/nuget-explorer.png
+++ b/src/buttons/drop-down-button/images/nuget-explorer.png
--- a/src/buttons/drop-down-button/images/razor-components-template.png
+++ b/src/buttons/drop-down-button/images/razor-components-template.png
--- a/src/buttons/drop-down-button/images/select-nuget.png
+++ b/src/buttons/drop-down-button/images/select-nuget.png
--- a/src/buttons/drop-down-button/index.md
+++ b/src/buttons/drop-down-button/index.md
@ -0,0 +1,8 @@
+# Overview
+
+The **Switch** is a graphical user interface element that allows you to toggle between checked and unchecked states.
+
+## Key Features
+
+* **Supports text**
+* **Supports small size**
--- a/Показать больше
+++ b/Показать больше
				`@ -0,0 +1 @@`
				`Repository for EJ2 Common Documentation for ASP .NET Core Razor Components.`