# AttentionCard Something that waits on the person: a mention, a question asked of them or a request still unanswered. A badge says why, then where and when, who is asking and what they wrote, with buttons to act on it. Screen readers hear the card by its reason and where it happened ("Asked you, Design review"). With `onOpen` the message is a button that opens where it happened. ```tsx import { AttentionCard } from "@/components/ouro/attention-card/attention-card"; ``` ## Example ```tsx Can you look at the second draft before noon? ``` ## Use instead when - Use `Message` instead for a message inside its conversation, `Alert` for a notice from the app itself, and `Item` for a row in a plain list. ## Props Type: `AttentionCardProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `actions` | `ReactNode` | | Buttons under the message, such as a quick reply or Dismiss. | | `children` | `ReactNode` | | What they wrote, cut to two lines. | | `className` | `string` | | Layout only: width, margins, grid placement (`mt-2`). Appearance classes warn in development; use `tone`. | | `from` (required) | `string` | | Who is asking. Their name comes before the message. | | `onOpen` | `(() => void)` | | Makes the message a button that opens where it happened. | | `reason` (required) | `string` | | Why it needs the person, as a short label in a badge ("Mentioned you", "Asked you"). | | `ref` | `Ref` | | Reaches the rendered element. | | `time` | `ReactNode` | | When, already formatted ("9:41", ``). | | `title` (required) | `string` | | Where it happened: the conversation, thread or document's name. | | `tone` | `"primary" \| "secondary" \| "destructive" \| "success" \| "warning"` | `"primary"` | The badge's color role from the theme, named after its token: `warning` for a question that waits on an answer, `secondary` for something quieter. | ## Native attributes Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page. ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `message`: Not a prop. What they wrote is the children: `Can you review?`. - `onClick`: Not a prop. The message opens with `onOpen`: ``. - `text`: Not a prop. What they wrote is the children: `Can you review?`. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Your classes always win over Ouro UI's: AttentionCard merges `className` last with `cn` (tailwind-merge), so a class that conflicts with its own replaces it.[^layout-classes] Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element. [^layout-classes]: test:registry/ouro/components/ouro/attention-card/attention-card.test.tsx::AttentionCard > forwards a ref and lets app layout classes win verify:testExists(registry/ouro/components/ouro/attention-card/attention-card.test.tsx::AttentionCard > forwards a ref and lets app layout classes win)