Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Text

v.1.0.0 | Saturn
Healthy
StorybookGithub

This component is used by the application's texts.

import { Text } from '@kubit-ui-web/react-components'
1
<Text>Text</Text>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for its quick use, access them through the variant prop.

1234
<Text variant="HEADING_H1_EXPANDED">Heading</Text>
<Text variant="HEADING_H2_EXPANDED">Heading</Text>
<Text variant="HEADING_H3_EXPANDED">Heading</Text>
<Text variant="HEADING_H4_EXPANDED">Heading</Text>
1234
<Text variant="PARAGRAPH_LARGE_EXPANDED">Paragraph</Text>
<Text variant="PARAGRAPH_MEDIUM_EXPANDED">Paragraph</Text>
<Text variant="PARAGRAPH_SMALL_EXPANDED">Paragraph</Text>
<Text variant="PARAGRAPH_CAPTION_EXPANDED">Paragraph</Text>

Cursor

The cursor prop can be used to apply custom cursor to the component.

1
<Text cursor="pointer">Text</Text>

Transform

The transform prop can be used to apply custom transform to the component.

123
<Text transform="capitalize">text</Text>
<Text transform="uppercase">Text</Text>
<Text transform="lowercase">TEXT</Text>

Color

The color prop can be used to apply custom colors to the component.

1
<Text color="#0303fc">Text</Text>

Custom typography

Apply custom styles without the need to indicate variant or props to the text component.

1234567
<Text customTypography={
  {
    font_size: '20px',
    font_weight: '700',
    color: '#0303fc'
  }
}>Text</Text>

Component type

Specifies the html tag of the text component. If not specified, it will be rendered as a p.

Check the list of TextComponentType options.

1
<Text component="span">Text</Text>

Draggable

If draggable is TRUE it means that the element can be dragged.

1
<Text draggable="true">Text</Text>
Icon HighlightedAccessibility
TextText