0
# Text Components
1

2
Typography components for consistent text styling and hierarchy.
3

4
## Text Component Selection
5

6
| Component | Purpose | Use Case |
7
|-----------|---------|----------|
8
| Title | Main headings | Page/section titles, card headers |
9
| Subtitle | Secondary headings | Subsection headers, descriptive text |
10
| Text | Body text | Descriptions, labels, content |
11
| Metric | Large numbers/KPIs | Dashboard metrics, key values |
12
| Bold/Italic | Text styling | Emphasis within text |
13
| Callout | Highlighted notices | Warnings, info boxes, alerts |
14
| Legend | Chart legends | Interactive category filtering |
15
16
All components accept `color?: Color` and `className?: string`.
17

18
## Title, Subtitle, Text, Metric
19

20
```typescript { .api }
21
interface TitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
22
  color?: Color;
23
}
24
// Subtitle, Text, Metric have same interface
25
```
26

27
**Examples:**
28

29
```typescript
30
import { Title, Subtitle, Text, Metric, Card } from '@tremor/react';
31

32
<Card>
33
  <Title>Annual Report</Title>
34
  <Subtitle>Fiscal Year 2024</Subtitle>
35
  <Text className="mt-2">
36
    This report provides comprehensive overview of company performance.
37
  </Text>
38
</Card>
39

40
// Metric card
41
<Card>
42
  <Text>Total Revenue</Text>
43
  <Metric>$45,231</Metric>
44
  <Text color="gray">+12% from last month</Text>
45
</Card>
46

47
// Colored text
48
<Title color="blue">Revenue Analysis</Title>
49
<Text color="gray">Secondary information</Text>
50
```
51

52
## Bold & Italic
53

54
```typescript { .api }
55
interface BoldProps extends React.HTMLAttributes<HTMLElement> {
56
  children: React.ReactNode;
57
}
58
// Italic has same interface
59
```
60

61
**Examples:**
62

63
```typescript
64
import { Bold, Italic, Text } from '@tremor/react';
65

66
<Text>
67
  Total revenue increased by <Bold>23%</Bold> this quarter.
68
</Text>
69

70
<Text>
71
  Data as of <Italic>January 15, 2024</Italic>
72
</Text>
73
```
74

75
## Callout
76

77
Highlighted message box for important notices.
78

79
```typescript { .api }
80
interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
81
  title: string; // Required
82
  icon?: React.ElementType;
83
  color?: Color;
84
  children?: React.ReactNode; // Optional body content
85
}
86
```
87

88
**Examples:**
89

90
```typescript
91
import { Callout, Card } from '@tremor/react';
92
import {
93
  InformationCircleIcon,
94
  ExclamationTriangleIcon,
95
  CheckCircleIcon,
96
} from '@heroicons/react/24/outline';
97

98
// Info callout
99
<Callout
100
  title="System Maintenance"
101
  icon={InformationCircleIcon}
102
  color="blue"
103
>
104
  Scheduled maintenance on Sunday, 2:00 AM - 4:00 AM EST.
105
</Callout>
106

107
// Warning
108
<Callout
109
  title="Data Limit Warning"
110
  icon={ExclamationTriangleIcon}
111
  color="amber"
112
>
113
  You have used 85% of your monthly data allowance.
114
</Callout>
115

116
// Title only (no body)
117
<Callout title="New features available" icon={InformationCircleIcon} color="blue" />
118
```
119

120
## Legend
121

122
Interactive chart legend with click handling and scrolling.
123

124
```typescript { .api }
125
interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
126
  categories: string[]; // Required
127
  colors?: (Color | string)[];
128
  onClickLegendItem?: (category: string, color: Color | string) => void;
129
  activeLegend?: string; // Currently highlighted legend item
130
  enableLegendSlider?: boolean; // Enable horizontal scrolling
131
}
132
```
133

134
**Examples:**
135

136
```typescript
137
import { Legend, Card, BarChart } from '@tremor/react';
138
import { useState } from 'react';
139

140
// Basic legend
141
<Legend
142
  categories={['Revenue', 'Profit', 'Expenses']}
143
  colors={['blue', 'emerald', 'red']}
144
/>
145

146
// Interactive with chart
147
function ChartWithLegend() {
148
  const [activeLegend, setActiveLegend] = useState<string>();
149
  const data = [
150
    { month: 'Jan', revenue: 2890, profit: 1200 },
151
    { month: 'Feb', revenue: 2756, profit: 1100 },
152
  ];
153

154
  return (
155
    <Card>
156
      <Legend
157
        categories={['revenue', 'profit']}
158
        colors={['blue', 'emerald']}
159
        onClickLegendItem={(cat) => setActiveLegend(cat === activeLegend ? undefined : cat)}
160
        activeLegend={activeLegend}
161
      />
162
      <BarChart
163
        data={data}
164
        index="month"
165
        categories={activeLegend ? [activeLegend] : ['revenue', 'profit']}
166
        colors={['blue', 'emerald']}
167
        showLegend={false}
168
      />
169
    </Card>
170
  );
171
}
172

173
// With slider (many categories)
174
<Legend
175
  categories={['Cat1', 'Cat2', 'Cat3', 'Cat4', 'Cat5', 'Cat6', 'Cat7']}
176
  colors={['blue', 'violet', 'cyan', 'emerald', 'amber', 'orange', 'red']}
177
  enableLegendSlider={true}
178
/>
179
```
180

181
## Typography Patterns
182

183
### Dashboard Header
184

185
```typescript
186
<Card>
187
  <Flex justifyContent="between" alignItems="start">
188
    <div>
189
      <Title>Analytics Dashboard</Title>
190
      <Subtitle>Q4 2024 Performance</Subtitle>
191
      <Text className="mt-2">Real-time metrics and KPIs</Text>
192
    </div>
193
    <Button>Export Report</Button>
194
  </Flex>
195
</Card>
196
```
197

198
### Metric Card with Delta
199

200
```typescript
201
<Card>
202
  <Flex justifyContent="between" alignItems="start">
203
    <div>
204
      <Text>Total Revenue</Text>
205
      <Metric>$45,231</Metric>
206
    </div>
207
    <BadgeDelta deltaType="increase">+12.3%</BadgeDelta>
208
  </Flex>
209
  <Text className="mt-4" color="gray">
210
    <Bold>$5,420</Bold> increase from last month
211
  </Text>
212
</Card>
213
```
214

215
### Information Panel
216

217
```typescript
218
<Card>
219
  <Title>About This Report</Title>
220
  <Text className="mt-2">
221
    This dashboard provides comprehensive overview. Data is updated <Bold>every 5 minutes</Bold>.
222
  </Text>
223
  <Divider className="my-4" />
224
  <Text><Italic>Last updated: January 15, 2024 at 3:45 PM EST</Italic></Text>
225
  <Callout
226
    title="Data Freshness"
227
    icon={InformationCircleIcon}
228
    color="blue"
229
    className="mt-4"
230
  >
231
    All metrics reflect data as of the last sync.
232
  </Callout>
233
</Card>
234
```
235

236
## Color Usage
237

238
Use consistent color meanings:
239

240
```typescript
241
// Status colors
242
<Text color="emerald">Success/Active</Text>
243
<Text color="amber">Warning/Pending</Text>
244
<Text color="red">Error/Inactive</Text>
245

246
// Brand colors
247
<Metric color="blue">Primary metric</Metric>
248
<Metric color="violet">Secondary metric</Metric>
249

250
// Neutral colors
251
<Text color="gray">Secondary information</Text>
252
<Text color="slate">Muted text</Text>
253
```
254

255
## Accessibility
256

257
```typescript
258
// Screen reader only
259
<Title id="section-header" className="sr-only">
260
  Screen reader only title
261
</Title>
262

263
// With ARIA labels
264
<Metric aria-describedby="metric-description">$45,231</Metric>
265
<Text id="metric-description" className="sr-only">
266
  Total revenue in US dollars
267
</Text>
268
```
269

270
## Common Mistakes
271

272
- ❌ Using Metric for non-numeric values (use Title instead)
273
- ❌ Forgetting `title` prop for Callout (required!)
274
- ❌ Not using Bold/Italic for emphasis in Text
275
- ❌ Inconsistent color usage for status indicators
276
- ❌ Missing Legend when showing multiple chart categories
277

278
## See Also
279

280
- [Types Reference](./types.md) for Color type
281
- [Chart Elements](./chart-elements.md) for using Legend with charts
282