# Feedback & Indicator Components

> **Props y API:** Disponibles vía MCP tool `widgets-get-component-props`. Este archivo documenta solo convenciones, gotchas y patrones específicos del proyecto.

---

## ⚠️ CRITICAL: All feedback components use `color` prop (NOT `variant` or `theme`)

```tsx
// ✅ CORRECT
<DAlert color="danger">Error message</DAlert>
<DBadge text="Status" color="success" />

// ❌ WRONG
<DAlert variant="danger">Error message</DAlert>
<DBadge text="Status" theme="success" />
```

---

## DAlert

Uses `children` (NOT `text` prop). Colors: `success`, `danger`, `warning`, `info`.

---

## DBadge

Uses `text` prop (NOT children). Add `soft` for lighter background, `rounded` for pill shape. Supports `iconStart`/`iconEnd` for Lucide icons.

---

## Toast System (DToastContainer + useDToast)

Three parts — all required:
1. **DToastContainer** — Place once in `App.tsx`: `<DToastContainer position="bottom-center" />`
2. **useDToast** — Hook to trigger toasts
3. **DToast** — Presentational (internal, don't use directly)

```tsx
const { toast } = useDToast();
toast({ title: 'Changes saved', icon: 'Check', color: 'success' });
toast(
  { title: 'Error', description: 'Unable to save.', icon: 'AlertTriangle', color: 'danger' },
  { duration: 5000 },
);
```

**ToastData:** `title` (required), `description?`, `timestamp?`, `icon?`, `color?`
**Options:** `id?` (prevents duplicates), `duration?` (ms), `position?`

Do NOT use `<DToast>` directly. Always use `useDToast()` hook. Container required.

---

## DSpinner — Does Not Exist

Use Bootstrap spinners directly:

```tsx
<div className="spinner-border text-primary" role="status">
  <span className="visually-hidden">Loading...</span>
</div>
```

---

## DChip

Removable chip/tag. `onClose` is a simple `() => void`.

```tsx
{tags.map(tag => (
  <DChip key={tag} label={tag} onClose={() => setTags(tags.filter(t => t !== tag))} />
))}
```