# ListItemTrailingIcon

> Slug: `list-item-trailing-icon` · Category: Display

## When to use
- A list row that needs a trailing icon for affordance — info, edit, settings, status — without using a navigation chevron.
- Optionally make the whole row a link via `navigationUrl` while still showing a custom trailing icon.

## When NOT to use
- The row should navigate with a chevron -> `ListItemNavigation`.
- The row needs a checkbox or radio control -> `ListItemFilter`.
- HSI device rows with WiFi status -> `ListItemHsi`.

## Variants & decision tree
- Static trailing icon -> pass `trailingIcon`.
- WiFi status icon (network strength) -> pass `trailingWifiIcon` with required `navigationUrl`.
- Make the entire row a link -> add `navigationUrl`.

## States
- `inverse` — dark-background styling.
- `focused` — force-focus visual for design review.

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **`label`** | `string` | — | Primary row text. |
| `labelId` | `string` | auto | Unique ID for the label. |
| `body` | `OptionalCopy[]` | — | Up to two body lines. |
| `status` | `StatusLabelProps` | — | Inline status pill. |
| `leadingDecorationType` | `'device' \| 'app' \| 'avatar' \| 'icon'` | — | Leading visual type. |
| `leadingImage` / `leadingIcon` / `leadingDecorationA11yLabel` | — | — | Leading decoration data. |
| `trailingIcon` | `ReactNode` | — | Static trailing icon (variant A). |
| `trailingWifiIcon` | `ReactNode` | — | WiFi-status icon (variant B, needs `navigationUrl`). |
| `trailingIconA11yLabel` | `string` | — | Accessible label for the trailing icon. |
| `navigationUrl` | `string` | — | Optional link target. Required for the WiFi variant. |
| `dividerPosition` | `'top' \| 'bottom' \| 'none'` | `'bottom'` | Divider placement. |
| `inverse` / `focused` / `className` | — | — | Standard. |

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

<List>
  <ListItemTrailingIcon
    label="Data plan"
    body={[{ text: 'Unlimited' }]}
    trailingIcon={<svg viewBox="0 0 24 24"><path d="…" /></svg>}
    trailingIconA11yLabel="More info about data plan"
  />
</List>
```

## Composition
- Use inside `<List>`.
- Pair the trailing icon with a tooltip pattern for explanatory affordances.

## Accessibility
- Always pass `trailingIconA11yLabel` for non-decorative trailing icons.
- If the row is a link, do not nest a separate button inside.

## Do / Don't
- Do: use this when the row's primary affordance is informational (info, settings, edit).
- Do: keep trailing icons monochrome to defer visual weight to the label.
- Don't: pass both `trailingIcon` and `trailingWifiIcon` — the union type forbids it.
- Don't: use this where a chevron is expected — switch to `ListItemNavigation`.
