# nylas-feedback-form

Source: https://developer.nylas.com/docs/reference/ui/feedback-form/

The `nylas-feedback-form` component is a UI component that displays the booked event card.

## Overview

- **Tag**: `<nylas-feedback-form>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-feedback-form></nylas-feedback-form>
```

### React

```jsx
import { NylasFeedbackForm } from '@nylas/react';

export default function Example() {
  return <NylasFeedbackForm />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `themeConfig` | `theme-config` | any | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `feedbackModalClosed` | void | Feedback modal close event. |
| `feedbackSubmitted` | { feedback: string; } | Feedback submitted event. |
| `triggerValidation` | void | This is an internal event that is used to trigger validation on the form. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nfbf` | The booked event card host. |
| `nfbf__button-outline` | The cancel & reschedule button CTA. |
| `nfbf__cancel-cta` | The cancel button CTA. |
| `nfbf__card` | The booked event card. |
| `nfbf__close-button` |  |
| `nfbf__description` | The description of the booked event card. |
| `nfbf__reschedule-cta` | The reschedule button CTA. |
| `nfbf__title` | The title of the booked event card. |
| `nfbfc__card` |  |

## Dependencies

This component uses the following child components:

- [`<button-component>`](/docs/reference/ui/button-component/)
- [`<close-icon>`](/docs/reference/ui/close-icon/)
- [`<textarea-component>`](/docs/reference/ui/textarea-component/)

## Used by

This component is used inside:

- [`<nylas-editor-tabs>`](/docs/reference/ui/editor-tabs/)
- [`<nylas-editor-tabs-group>`](/docs/reference/ui/editor-tabs-group/)
- [`<nylas-scheduling>`](/docs/reference/ui/scheduling/)