## Inline Alert (S—149)

Inline alerts in info, success, warning and error that differ by icon and weight, not colour, with actions and dismiss.

- URL: https://sundaeui.dev/components/inline-alert
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/inline-alert.json`
- Tags: warning, banner, feedback, error, alert, callout

Four tones told apart by icon shape and border weight so they stay monochrome and still read at a glance: info is quiet, error is inverted.
Each can carry a title, body, a primary action and a dismiss that collapses the alert’s height.

### Usage

```tsx
import { InlineAlert } from '@/components/sundae/inline-alert'

<InlineAlert />
```

### Props

- `tone` (`'info' | 'success' | 'warning' | 'error'`, default `'info'`): Tone.
- `title` (`string`, required): Heading.
- `children` (`ReactNode`): Body.
- `action` (`{ label: string; onClick: () => void }`): Optional action.
- `onDismiss` (`() => void`): Shows a close button.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Form-level errors, plan limits, sync status, release notes in context.

### When not to use

- Transient confirmations: use a toast.

### Accessibility

- Errors and warnings use role="alert"; info and success use role="status".
- Tone is in the icon’s accessible name, not colour alone.
- Reduced motion removes the movement and keeps every state change.