Documentation
Feedback Buttons
Thumbs up/down toggle buttons for collecting user feedback on AI responses. Supports mutual exclusivity and visual feedback states.
Installation
1import { FeedbackButtonsComponent } from '@angular-ai-kit/core';Live Demo
Configuration
Disabled
Features
- Thumbs up/down toggle buttons
- Mutual exclusivity - selecting one deselects other
- Visual feedback with color changes
- Disabled state support
API Reference
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
value | 'up' | 'down' | null | null | Current feedback value |
disabled | boolean | false | Whether the buttons are disabled |
customClasses | string | '' | Additional CSS classes |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
valueChange | EventEmitter<'up' | 'down' | null> | - | Emitted when feedback value changes |
thumbsUp | EventEmitter<void> | - | Emitted when thumbs up is selected |
thumbsDown | EventEmitter<void> | - | Emitted when thumbs down is selected |
Usage Example
1<ai-feedback-buttons2 [value]="feedbackValue()"3 (valueChange)="handleFeedbackChange($event)"4 (thumbsUp)="handleThumbsUp()"5 (thumbsDown)="handleThumbsDown()"6/>Accessibility
- Uses role="group" for button grouping
- aria-pressed for toggle state
- Descriptive aria-labels
- Keyboard accessible