Text

Display text with various styles, sizes, colors, and formatting options.

Import


import { Text } from '@tidbcloud/uikit'

Basic Usage


import { Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <Text size="xs">Extra small text</Text>
      <Text size="sm">Small text</Text>
      <Text size="md">Default text</Text>
      <Text size="lg">Large text</Text>
      <Text size="xl">Extra large text</Text>
      <Text fw={500}>Semibold</Text>
      <Text fw={700}>Bold</Text>
      <Text fs="italic">Italic</Text>
      <Text td="underline">Underlined</Text>
      <Text c="dimmed">Dimmed text</Text>
      <Text c="blue">Blue text</Text>
      <Text tt="uppercase">Uppercase</Text>
    </>
  )
}

Gradient Text


import { Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Text size="xl" fw={900} variant="gradient" gradient={{ from: 'cyan', to: 'blue', deg: 90 }}>
      Gradient Text
    </Text>
  )
}

Truncate


<Text truncate>Long text that will be truncated...</Text>

Line Clamp


<Text lineClamp={3}>Long text that will be clamped to 3 lines...</Text>

As Span


<Text span>Inline text element</Text>

Key Props

Prop	Type	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	Font size
`c`	`MantineColor`	Text color
`fw`	`number`	Font weight
`fs`	`string`	Font style (e.g., ‘italic’)
`td`	`string`	Text decoration (e.g., ‘underline’)
`tt`	`string`	Text transform (e.g., ‘uppercase’)
`ta`	`string`	Text alignment
`truncate`	`boolean \| 'start' \| 'end'`	Truncate text with ellipsis
`lineClamp`	`number`	Maximum number of lines
`span`	`boolean`	Render as span element
`inherit`	`boolean`	Inherit font styles from parent
`gradient`	`MantineGradient`	Gradient configuration (with `variant="gradient"`)