---
title: Text
description: The Text component is a versatile and flexible component for displaying text content with customizable size, weight, and color.
category: Display
related: [Title, Badge, Container, Panel]
commonPatterns: [body-text, label-text, status-text]
---

Source: https://clickhouse.design/click-ui/text

# Text

The Text component is a versatile and flexible component for displaying text content in your application. It provides various options for customizing the appearance and behavior of text elements.

## Example

## Props

| Prop      | Type                                                     | Default value | Description                                                              |
| --------- | -------------------------------------------------------- | ------------- | ------------------------------------------------------------------------ |
| size      | `string`                                                 | `"md"`        | Font size of the text (e.g., "xs", "sm", "md", "lg", "xl")               |
| weight    | `"normal" \| "medium" \| "semibold" \| "bold" \| "mono"` | `"normal"`    | Font weight of the text                                                  |
| color     | `"default" \| "muted" \| "danger" \| "disabled"`         | `"default"`   | Text color variant                                                       |
| align     | `"left" \| "center" \| "right"`                          | `"left"`      | Horizontal text alignment                                                |
| fillWidth | `boolean`                                                | `false`       | Whether the text should take up the full width of its container          |
| className | `string`                                                 | `undefined`   | Additional CSS class names to apply to the text element                  |
| component | `ElementType`                                            | `"p"`         | Custom component to render as (e.g., "span", "div", or custom component) |

```tsx
import { Text } from '@clickhouse/click-ui'

<Text size='lg' weight='bold'>Hello World</Text>
```

## Quick start

Use Text for body content with customizable styling:

```tsx
<Text size='lg' weight='bold'>Heading</Text>
<Text size='md'>Body text</Text>
<Text size='sm' color='muted'>Helper text</Text>
```

## Related components

- **Title**: Use Title for headings and page titles
- **Badge**: Use Badge for status indicators alongside text
- **Container**: Use Container to layout multiple Text components
- **Panel**: Use Text inside Panel for structured content

## Common use cases

### Body text

```tsx
import { Text, Container } from '@clickhouse/click-ui'

function BodyText() {
return (
  <Container orientation='vertical' gap='sm'>
    <Text size='lg' weight='bold'>Title</Text>
    <Text size='md'>Body content</Text>
    <Text size='sm' color='muted'>Metadata</Text>
  </Container>
)
}
```

### Status messages

```tsx
import { Text } from '@clickhouse/click-ui'

function StatusMessages() {
return (
  <>
    <Text color='danger'>Error message</Text>
    <Text color='muted'>Info message</Text>
  </>
)
}
```

### Text sizes

```tsx
import { Text } from '@clickhouse/click-ui'

function TextSizes() {
return (
  <>
    <Text size='lg'>Large text</Text>
    <Text size='md'>Medium text</Text>
    <Text size='sm'>Small text</Text>
  </>
)
}
```

## Variants

Default Text
Medium Text
Small Text
Bold Text
Danger Text
Muted Text
Disabled Text