Typography

Typography Components follow a design system to convey meaning. - Material Docs

import { Heading, Subtitle, BodyText, Caption, Overline} from 'material-bread';

You can either pass text with the text prop or pass as children

Subtitle 1

Subtitle 2

Body 1

Body 2

Caption

Overline

Live Editing

class Demo extends React.Component {

  render() {
    return (
      <View>  
        <Heading type={1} text="H1" />
        <Heading type={2} text="H2" />
        <Heading type={3} text="H3" />
        <Heading type={4} text="H4" />
        <Heading type={5} text="H5" />
        <Heading type={6} text="H6" />
        <Subtitle type={1} text="Subtitle 1" />
        <Subtitle type={2} text="Subtitle 2" />
        <BodyText type={1} text="Body 1" />
        <BodyText type={2} text="Body 2" />
        <Caption text="Caption" />
        <Overline text="Overline" />
      </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Heading, Subtitle, BodyText, Caption, Overline, } from 'material-bread';

class Demo extends React.Component {
  
  render() {
    return (
      <View>
        <Heading type={1} text="h1" />
        <Heading type={2} text="h2" />
        <Heading type={3} text="h3" />
        <Heading type={4} text="h4" />
        <Heading type={5} text="h5" />
        <Heading type={6} text="h6" />
        <Subtitle type={1} text="Subtitle 1" />
        <Subtitle type={2} text="Subtitle 2" />
        <BodyText type={1} text="Body 1" />
        <BodyText type={2} text="Body 2" />
        <Caption text="Caption" />
        <Overline text="Overline" />
      </View>
    );
  }
}

Name

Description

Type

Default

align

Applies text-align to component

string

start

color

Text color

string

gutterBottom

Adds marginBottom 10 to create space

bool

false

style

Styles root element

object

text

Renders a Text string

string

themeColor

The color value defined within the `textColor` theme property

string

primary

Typography

Component #

Usage #

Props #