Text

Basic text component with built-in styling and semantic variants.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Text,
  TextLink,
  Strong,
  Code
} from "components/selia/text";

Structure

The expected structure and composition of the component.

<Text>Text</Text>
<TextLink>TextLink</TextLink>
<Strong>Strong</Strong>
<Code>Code</Code>

You may want to use the render prop to pass a custom link element. See the Customization page for more details.

import { Link } from "react-router";

<TextLink render={<Link to="/about" />}>
  About
</TextLink>

Props

Each component part, its responsibility, and the props it exposes.

Examples

Link

To create a link, use the TextLink component.

Strong

To create a strong text, use the Strong component.

Code

To create a code text, use the Code component.