1. Components
  2. Text

Components

Text

Tremor has several components for styling text.

Metric

CHF 1,995

Title

Drei Weieren are an oasis of peace in the middle of St.Gallen.

Subtitle

Drei Weieren are an oasis of peace in the middle of St.Gallen.

Text

Drei Weieren are an oasis of peace in the middle of St.Gallen.

Bold and Italic

Drei Weieren are an oasis of peace in the middle of St.Gallen.

   

Text components

Tremor exports six components for styling text.

import { Metric, Title, Subtitle, Bold, Italic, Text } from "@tremor/react";

Anatomy

How the basic component is pieced together.

//Text.tsx
import { Metric, Title, Subtitle, Bold, Italic, Text } from "@tremor/react";

export default () => (
  <>
    <Metric color="gray" truncate={false} marginTop="mt-0"></Metric>

    <Title color="gray" truncate={false} marginTop="mt-0"></Title>

    <Subtitle color="gray" truncate={false} marginTop="mt-0"></Subtitle>

    <Text
      color="gray"
      textAlignment="text-left"
      truncate={false}
      height=""
      marginTop="mt-0"
    ></Text>

    <Bold></Bold> // should be use within a <Text></Text> element

    <Italic></Italic> // should be use within a <Text></Text> element
  </>
);

Usage example

The example below shows a composition of all text styling components: Metric, Title, Subtitle, Bold, Italic, and Text.

Metric

CHF 1,995

Title

Drei Weieren are an oasis of peace in the middle of St.Gallen.

Subtitle

Drei Weieren are an oasis of peace in the middle of St.Gallen.

Bold

Drei Weieren are an oasis of peace in the middle of St.Gallen.

Italic

Drei Weieren are an oasis of peace in the middle of St.Gallen.

Text

Drei Weieren are an oasis of peace in the middle of St.Gallen.

import {
    Metric
    Title,
    Subtitle,
    Text,
    Bold,
    Italic,
} from '@tremor/react'

export default () => (
    <Metric>CHF 1,995</Metric>

    <Title>Drei Weieren is an oasis of peace in the middle of St.Gallen.</Title>

    <Subtitle>Drei Weieren is an oasis of peace in the middle of St.Gallen.</Subtitle>

    <Text>Drei Weieren is an oasis of peace in the middle of St.Gallen.</Text>

    <Text>Drei Weieren is an <Bold>oasis of peace</Bold> in the middle of <Italic>St.Gallen.</Italic></Text>
);

API Reference: Metric, Title, Subtitle

coloroptional
Description
Controls the color of the text.
Type
string
Default
gray
Values
See color section
truncate
Description
Control the truncate behavior of the element.
Type
boolean
Default
false
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: Bold, Italic

Those components do not have any properties.

API Reference: Text

coloroptional
Description
Controls the color of the text.
Type
string
Default
gray
Values
See color section
textAlignmentoptional
Description
Controll the alignment of text.
Type
string
Default
text-left
truncate
Description
Control the truncate behavior of the element.
Type
Boolean
Default
false
Values
true, false
heightoptional
Description
Controls the height of the element.
Type
string
Default
-
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0