laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
66 lines (46 loc) • 2 kB
Markdown
# Typo
## Overview
Typography component with predefined variants for headings, body text, captions, and utility text. Renders a semantic HTML tag per variant (overridable via `as`).
---
## Props
| Prop | Type | Default | Description |
| ---------- | --------------------------------- | --------- | ----------- |
| `variant` | `TypoVariant` | `"body"` | Typographic style to apply. |
| `as` | `React.ElementType` | auto | Override rendered HTML element. |
| `className`| `string` | `undefined` | Extra classes. |
| `...props` | `React.HTMLAttributes<HTMLElement>` | — | Spread to rendered element. |
`TypoVariant`:
- `"hero-title"`, `"title"`, `"subtitle"`
- `"body"`, `"body-bold"`
- `"caption"`, `"overline"`, `"button"`, `"small"`
- `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`
---
## Behavior
- **Semantic tag**: Each variant maps to a sensible HTML tag (e.g., `h1` for `h1`, `p` for `body`).
- **Theming**: Variants use DS tokens for color and size; add `className` to tweak.
---
## Examples
```tsx
import { Typo } from "laif-ds";
export function Variants() {
return (
<div className="space-y-2">
<Typo variant="hero-title">Hero Title</Typo>
<Typo variant="title">Page Title</Typo>
<Typo variant="subtitle">Subtitle</Typo>
<Typo variant="body">Regular body text</Typo>
<Typo variant="body-bold">Bold body text</Typo>
<Typo variant="caption">Caption</Typo>
<Typo variant="overline">Overline</Typo>
<Typo variant="small">Small text</Typo>
</div>
);
}
export function OverrideElement() {
return <Typo variant="body" as="span">Inline body as span</Typo>;
}
```
---
## Notes
- **Accessibility**: Use heading variants (`h1`–`h5`) to reflect document structure.
- **Consistency**: Prefer `variant` over ad‑hoc classes for consistent typography.