# Tidbit

> Slug: `tidbit` · Category: Display

## When to use
- Display an informational, caution, error, or positive message inline with content.
- Provide a small alert with optional leading icon, title, body, action, and dismiss button.
- Reinforce form validation messaging or contextual guidance.

## When NOT to use
- Transient toast feedback after an async action — use `Snackbar`.
- Persistent global page banner spanning full width — use `NoticeBar`.
- Modal interruption — use `Modal` or `FullPageInterruption`.
- Promotional / marketing copy — use `PromoBanner` or `PromoLabel`.

## Variants & decision tree
- Tone via `variant`:
  - `default` — neutral information.
  - `caution` — warning state.
  - `error` — failure state.
  - `positive` — success state.
- Elevation: `elevated` (default true) adds shadow; set `false` for flat surfaces.
- `alternate` toggles an alternate visual treatment via `data-alternate`.
- Dismissable -> `isDismissable` + `onDismiss`.

## States
- `isDismissable` adds an `IconButton` close affordance with built-in close SVG.
- `dismissButtonFocused` forces focus on the dismiss button (design review).
- Inverse-aware (theme or `inverse` prop).

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **`id`** | `string` | — | Unique id; title element gets `${id}__title`. |
| **`body`** | `ReactNode` | — | Main message text. |
| `title` | `ReactNode` | — | Optional bold title above the body. |
| `action` | `ReactNode` | — | Trailing action element (e.g., `ButtonStyledAsLink`). |
| `leadingIcon` | `ReactNode` | — | Leading SVG icon. |
| `leadingIconA11yLabel` | `string` | — | Accessible label for leading icon. |
| `variant` | `'default' \| 'caution' \| 'error' \| 'positive'` | `'default'` | Tone. |
| `isDismissable` | `boolean` | `false` | Show close affordance. |
| `onDismiss` | `() => void` | — | Dismiss callback. |
| `elevated` | `boolean` | `true` | Apply shadow elevation. |
| `alternate` | `boolean` | — | Alternate visual treatment. |
| `inverse` | `boolean` | inherits | Dark-background styling. |

## Usage examples
```tsx
import { Tidbit, ButtonStyledAsLink } from 'arrow-react-bootstrap';

// Informational tip
<Tidbit
  id="auto-pay-tip"
  leadingIcon={InfoIcon}
  title="Save with AutoPay"
  body="Enroll in AutoPay to save $5/month on each line."
  action={<ButtonStyledAsLink label="Enroll now" onClick={enroll} />}
/>

// Dismissable error
<Tidbit
  id="payment-error"
  variant="error"
  body="We couldn't process your payment. Please try again."
  isDismissable
  onDismiss={hideError}
/>

// Flat positive confirmation
<Tidbit id="saved" variant="positive" elevated={false} body="Changes saved." />
```

## Composition
- Use inline within forms after the related field, or above a `ButtonTray`.
- Pair with `IconButton` actions through the `action` slot.
- Place inside `Modal` body for contextual error reporting.

## Accessibility
- Renders a `<div>`; the title is rendered as `<h2>` with `id={`${id}__title`}` so it can be referenced.
- Provide `leadingIconA11yLabel` when the icon adds meaning beyond the text.
- The dismiss `IconButton` has `a11yLabel="Close"` baked in.
- For high-priority alerts, consider wrapping in a parent `role="alert"` or use `Snackbar` instead.

## Do / Don't
- Do: keep `body` concise (one or two sentences).
- Do: prefer `Snackbar` for transient feedback; `Tidbit` is persistent.
- Don't: stack multiple `Tidbit`s on one screen; consolidate.
- Don't: use `variant="error"` for non-blocking messages.
