# Inline alert (goodtabs UI)

A compact info, success, warning or error message that sits within content.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/inline-alert.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/inline-alert`

## Usage

```tsx
import { InlineAlert } from "@/components/ui/inline-alert"

<InlineAlert tone="error">The build failed on line 42.</InlineAlert>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tone | `"info" | "success" | "warning" | "error"` | `"info"` | Picks the icon and the visible label. Warning and error use role=alert. |
| children | `ReactNode` |  | The message, one or two sentences. |

## When to use

- A note about the section or form right next to it
- Deprecation, limits and validation summaries inside docs or settings
- Messages that should stay put rather than disappear

## When not to use

- Page-wide state, use the alert banner
- A message with a title, body and action, use the notice card
- Confirmation of an action that already finished, use a toast

## Notes for agents

- Server component, no state and no dismiss; compose your own if you need one
- Each tone has a different icon and a visible label word, so meaning survives greyscale
- Only error uses --destructive, on the icon and the left rule; the other tones stay in foreground tones
- The label is part of the sentence ('Warning. ...'), so write the message to follow it

Docs: https://ui.goodtabs.co/components/inline-alert