# Feedback & Communication / Rate Experience Chips Quick experience rating using emotion chips with smiley icons for fast feedback. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-rate-experience-chips--introduction ## Pattern variants - Rate Experience Chips: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-rate-experience-chips--rate-experience-chips ## When to use this pattern Use Feedback & Communication / Rate Experience Chips when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Feedback & Communication / Rate Experience Chips. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Patterns

Rate Experience

Quick experience rating using emotion chips with smiley icons for fast feedback.

mood

Rate Experience Chips

Quick service rating using emotion chip buttons with smiley face icons.

``` React: ```jsx import React from 'react'; const FeedbackCommunicationRateExperienceChipsExample1Demo = () => ( <>
Patterns

Rate Experience

Quick experience rating using emotion chips with smiley icons for fast feedback.

mood

Rate Experience Chips

Quick service rating using emotion chip buttons with smiley face icons.

); export default FeedbackCommunicationRateExperienceChipsExample1Demo; ``` Angular: ```html
Patterns

Rate Experience

Quick experience rating using emotion chips with smiley icons for fast feedback.

mood

Rate Experience Chips

Quick service rating using emotion chip buttons with smiley face icons.

``` ### 2. Rate Experience Chips — Rate Experience Chips HTML: ```html

Rate your experience

star star star star star
0 / 200
Powered by -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationRateExperienceChipsExample2Demo = () => ( <>

Rate your experience

star star star star star
0 / 200
Powered by -
); export default FeedbackCommunicationRateExperienceChipsExample2Demo; ``` Angular: ```html

Rate your experience

star star star star star
0 / 200
Powered by -
```