Sentiment Alert
AI
Monitoring
Tone detection indicator showing positive, neutral, negative, or hostile sentiment with score display.
Badge Variant
Compact inline sentiment indicators
Positive(+75)
Neutral(0)
Negative(-45)
Hostile(-85)
Banner Variant
Full-width alerts with messages
Positive Tone Detected
User feedback is constructive and appreciative
+75
Neutral Tone Detected
Standard professional communication
0
Negative Tone Detected
User expressing frustration or disappointment
-45
Hostile Tone Detected
Aggressive language detected - consider escalation
-85
Props
SentimentAlertIndicator component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
sentiment* | 'positive' | 'neutral' | 'negative' | 'hostile' | — | Detected sentiment level |
score | number | — | Optional sentiment score (-100 to 100) |
message | string | — | Optional contextual message (shown in banner variant) |
variant | 'badge' | 'banner' | 'badge' | Display variant |
className | string | — | Additional CSS classes |
Usage
Import and implementation example
import { SentimentAlertIndicator } from '@/components/ui/sentiment-alert'
// Badge variant (compact)<SentimentAlertIndicator sentiment="positive" score={75} variant="badge"/>
// Banner variant (with message)<SentimentAlertIndicator sentiment="hostile" score={-85} message="Aggressive language detected - consider escalation" variant="banner"/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Four sentiment levels: Positive, neutral, negative, and hostile detection
- Score display: Numeric score from -100 to +100 with sign
- Two variants: Badge for inline use, banner for prominent alerts
- Icon indicators: Universal visual cues for quick recognition
- Custom messages: Optional contextual message in banner variant
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="status" or aria-live for dynamic sentiment changesScore communicated as text, not color aloneKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Component is display-only, no interaction |
Notes
- Sentiment communicated through text label, not only icon or color
- Score shown as signed number (+75, -85) for clarity