Skip to main content

Text

Text renders themed typography with pre-defined styles for headings, subtitles, paragraphs, captions, and labels. The category prop selects the typography variant from the Eva Design System.

Import​

import { Text } from '@ui-kitten/components';

Basic Usage​

import React from 'react';
import { Layout, Text } from '@ui-kitten/components';

const TypographyShowcase = () => (
  <Layout style={{ flex: 1, padding: 16 }}>
    <Text category="h1">Heading 1</Text>
    <Text category="s1">Subtitle 1</Text>
    <Text category="p1">This is a paragraph of body text.</Text>
    <Text category="c1">Caption</Text>
    <Text category="label">Label</Text>
  </Layout>
);

Props​

PropertyTypeDefaultDescription
category'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 's1' | 's2' | 'p1' | 'p2' | 'c1' | 'c2' | 'label''p1'Typography category controlling font size, weight, and line height.
status'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control'undefinedSemantic color applied to the text.
appearance'default' | 'alternative' | 'hint''default'Visual style variant.
childrenReactNode-Text content.

Text also accepts all standard React Native Text props.

Storybook​

Live examples coming soon via Storybook.