@neo4j-ndl/react/skills/ndl-react/components/typography.md

React implementation of Neo4j Design System

# Typography

Import: `import { Typography } from '@neo4j-ndl/react'`

## Props

### Typography

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `children` | `ReactNode` |  |  | Content displayed inside the component |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `variant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` | ✅ |  | The typography variant to use for the text. |

## Examples

### Default

```tsx
import { Typography } from '../Typography';

const Component = () => (
  <Typography variant="body-medium">
    The quick brown fox jumps over the lazy dog.
  </Typography>
);

export default Component;
```

### Anchor

```tsx
import { Typography } from '../Typography';

const Component = () => {
  const variant = 'title-1';

  return (
    <Typography as="a" htmlAttributes={{ href: '/index' }} variant={variant}>
      {variant}: The quick brown fox jumps over the lazy dog
    </Typography>
  );
};

export default Component;
```

### Variants

```tsx
import { tokens } from '@neo4j-ndl/base';

import { Typography } from '../Typography';

const VARIANTS = Object.keys(tokens.typography) as Array<
  keyof typeof tokens.typography
>;

const Component = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    {VARIANTS.map((variant) => (
      <Typography key={variant} variant={variant}>
        {variant}: The quick brown fox jumps over the lazy dog.
      </Typography>
    ))}
  </div>
);

export default Component;
```