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

Large Bold Text

Medium Default Text

Small Muted Text

Danger Text

Props

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

Quick Start

Use Text for body content with customizable styling:

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

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

Article Title

This is the main body text of the article. It provides detailed information and context.

Published on January 1, 2024

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

Error: Something went wrong

Info: This is informational text

Default: Normal text content

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

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

Text Sizes

Extra Large

Large

Medium

Small

Extra Small

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