Text

Import: import { Text } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

<Text>text normal</Text>

1
<Text>text normal</Text>
2

Colors

Set the color of Text.

<Group>
  <Text color="warning">text warning</Text>
  <Text color="error">text error</Text>
  <Text color="success">text success</Text>
</Group>

1
<Group>
2
  <Text color="warning">text warning</Text>
3
  <Text color="error">text error</Text>
4
  <Text color="success">text success</Text>
5
</Group>
6

Style

Set the style of Text.

<Group>
  <Text underline>text underline</Text>
  <Text delete>text delete</Text>
  <Text italic>text italic</Text>
  <Text weight={600}>text weight</Text>
  <Text size="lg">text weight</Text>
</Group>

1
<Group>
2
  <Text underline>text underline</Text>
3
  <Text delete>text delete</Text>
4
  <Text italic>text italic</Text>
5
  <Text weight={600}>text weight</Text>
6
  <Text size="lg">text weight</Text>
7
</Group>
8

Variant

Set variant of Text.

<Group direction="column">
  <Text variant="h1">h1 title</Text>
  <Text variant="h2">h2 title</Text>
  <Text variant="h3">h3 title</Text>
  <Text variant="h4">h4 title</Text>
  <Text variant="h5">h5 title</Text>
  <Text variant="h6">h6 title</Text>
</Group>

1
<Group direction="column">
2
  <Text variant="h1">h1 title</Text>
3
  <Text variant="h2">h2 title</Text>
4
  <Text variant="h3">h3 title</Text>
5
  <Text variant="h4">h4 title</Text>
6
  <Text variant="h5">h5 title</Text>
7
  <Text variant="h6">h6 title</Text>
8
</Group>
9

Transform

Set transform of Text.You can set the value to capitalize, uppercase and lowercase.

<Group>
  <Text transform="capitalize">ASSddd</Text>
  <Text transform="uppercase">ASSddd</Text>
  <Text transform="lowercase">ASSddd</Text>
</Group>

1
<Group>
2
  <Text transform="capitalize">ASSddd</Text>
3
  <Text transform="uppercase">ASSddd</Text>
4
  <Text transform="lowercase">ASSddd</Text>
5
</Group>
6