# Caption

Small text for metadata, timestamps and labels.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<Text weight="medium">Invoice #1042</Text>
<Caption>Paid on March 3 by Alex Smith</Caption>
```

## Installation

```bash
npx shadcn@latest add @constella/caption
```

## Usage

```tsx
import { Caption } from "@/components/typography/caption";
```

```tsx
<Caption>Paid on March 3 by Alex Smith</Caption>
```

## Size

Use the `size` prop. `lg` is the size of a badge or a keycap; `xs` is for a mark too small to read as a line, like a count on an icon.

```tsx
<Caption size="lg">Paid on March 3 by Alex Smith</Caption>
<Caption>Paid on March 3 by Alex Smith</Caption>
<Caption size="sm">Paid on March 3 by Alex Smith</Caption>
<Caption size="xs">Paid on March 3 by Alex Smith</Caption>
```

## Uppercase

Use the `uppercase` prop for a label over a group. It spaces the letters out, since capitals read cramped at their own spacing.

```tsx
<Caption>Billing</Caption>
<Caption uppercase>Billing</Caption>
```

## API Reference

| Prop | Type | Default |
| --- | --- | --- |
| `size` | `"xs" \| "sm" \| "base" \| "lg"` | `"base"` |
| `uppercase` | `boolean` | `false` |
| `weight` | `"regular" \| "semimedium" \| "medium" \| "semibold"` | `"regular"` |
| `color` | as [Text](https://constella.aayush.cv/docs/components/text/index.md) | `"muted"` |
| `render` | `ReactElement \| function` | `<p>` |
| `sx` | `Sx`, applied last | - |