` by default. ```tsx import { Text } from "@/components/ouro/text/text"; ``` ## Example ```tsx Braise for three hours. Updated 2 days ago Could not save the recipe. {recipe.description} ``` ## Usage Inside a `Button`, pass plain text as children; the button styles it. ## Use instead when - Use `Heading` instead for titles (it renders `

`–`

`). ## Props The props the modes share. Type: `TextProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `align` | `"start" \| "center" \| "end"` | inherited | Alignment in writing direction. | | `as` | `"p" \| "span" \| "div"` | `"p"` | The element to render. Use `span` inside other text, `div` around block content. | | `children` (required) | `ReactNode` | | The text. Inline elements such as `` and `` are fine inside. | | `className` | `string` | | Layout only: margins, width, grid placement (`mt-2`, `max-w-prose`). Appearance classes warn in development; use `size`, `tone` and `align`. | | `ref` | `Ref` | | Reaches the rendered element. | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Type size from the theme. | | `tone` | `"primary" \| "secondary" \| "destructive" \| "success" \| "warning" \| "default" \| "muted"` | `"default"` | Text color: `default` foreground, `muted` for secondary text, or a tone for status text (`destructive` for an error). `secondary` is the same as `muted`, because shadcn's `--secondary` is a surface color, not a text color. | ## Modes `TextProps` is a union: pass the props of exactly one mode. Mixing them is a type error. ### With `lines` | Prop | Type | Description | | --- | --- | --- | | `lines` | `number` | Clamps the text to this many lines with an ellipsis. Use `truncate` for one line. | Not in this mode (typed `never`): - `truncate`: Not with `lines`. Use `truncate` for one line or `lines` for more, not both. ### With `truncate` | Prop | Type | Description | | --- | --- | --- | | `truncate` | `boolean` | Cuts the text to one line with an ellipsis. Use `lines` for more than one line. | Not in this mode (typed `never`): - `lines`: Not with `truncate`. Use `truncate` for one line or `lines` for more, not both. ## 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. - `color`: Not a prop. Ouro UI uses `tone`: ``. - `variant`: Not a prop. Text has no variants; use `size` and `tone`: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). 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: use the `align` prop.