Code

Props

Props	Data Type	Required
children	string	✅
className	string	❌
align	string (Left, Right, Center, Justify)	❌
textStyle	string (Mouse, SmCaps, Body, BodyLg, Heading2, Heading1, Title2, Title2)	❌
muted	boolean	❌
contrast	boolean	❌

How to Use

Text is a dynamic component that allows developer to have controll over the HTML tag to be inserted in the application, at the same time it facilitates basic text styles, siptser typests and it is connected by default to the sds-theme css tokens.

The available text HTML tags are the fokllowings:

• h1, h2, h3, h4, h5, h6

• p

• span

import React from 'react';
import {Text} from '@2600hz/sds-react-components';

const Example = ()=>{
    return(
        <div className='container'>
            <Text.h1 textStyle='Title1' >This is a title</Text.h1>
            <Text.p textStyle='Body'>
                This is a random text for a paragraph
            </Text.p>
        </div>
    )
}

export default Example;

The previous code is going to look like the following once it is rendered

<div className='container'>
    <h1 class='sds_Text sds_Text_TextStyle_Title1'>This is a title</h1>
    <p class='sds_Text sds_Text_TextStyle_Body'>
        This is a random text for a paragraph.
    </p>
</div>

This component is just facilitating standard HTML text tags with already included sds-theme tokens. Its use is not mandatory but it can result as a very useful tool for developers at facilitating sds typeset styles by default.

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Storybooksipster-react-component-storybook.netlify.app