---
title: 'Feedback Components'
description: 'Overview of all feedback and status components available in Hux UI'
---

## Overview

Hux UI provides a comprehensive set of feedback components for displaying status, alerts, and notifications to users. Each component is designed with consistency, accessibility, and theme awareness in mind.

## Available Components

<CardGroup cols={2}>
  <Card
    title="HuxAlert"
    icon="message-circle"
    href="/components/alert"
  >
    Message boxes with semantic variants and dismissible functionality
  </Card>
  <Card
    title="HuxBadge"
    icon="tag"
    href="/components/badge"
  >
    Status indicators and notification counters with semantic variants
  </Card>
</CardGroup>

## Component Features

### **Semantic Variants**
- Clear visual distinction between different message types
- Consistent color coding across all feedback components
- Automatic theme adaptation (light/dark mode)

### **Accessibility First**
- WCAG AA compliance for all components
- Proper screen reader support
- Keyboard navigation support
- High contrast ratios

### **User Experience**
- Dismissible alerts for user control
- Clear visual hierarchy and typography
- Smooth animations and transitions
- Responsive design for all screen sizes

### **Integration**
- Seamless integration with other Hux UI components
- Consistent spacing and typography
- Theme-aware styling system
- Customizable appearance

## Quick Examples

### Alert Component
```dart
HuxAlert(
  variant: HuxAlertVariant.success,
  title: 'Success!',
  message: 'Operation completed successfully.',
  showIcon: true,
  onDismiss: () => print('Alert dismissed'),
)
```

### Badge Component
```dart
HuxBadge(
  label: 'New',
  variant: HuxBadgeVariant.primary,
  size: HuxBadgeSize.medium,
)
```

## Examples

<CardGroup cols={2}>
  <Card
    title="Status Indicators"
    icon="tag"
    href="/examples/status-indicators"
  >
    See feedback components in different contexts
  </Card>
  <Card
    title="Form Feedback"
    icon="edit"
    href="/examples/form-building"
  >
    Alerts and badges in form scenarios
  </Card>
</CardGroup>

## Related Documentation

- [Form Building Guide](/examples/form-building) - Learn how to use feedback in forms
- [Theming Guide](/theming) - Customize component appearance
- [Accessibility Guide](/advanced/accessibility) - Ensure your feedback is accessible
- [Component Library](/components/buttons) - Explore all available components
