Waffles - Text

Usage guidance

In general, when dealing with text, Paragraph component should be used. This Text component is meant to be used mainly as a building block for other components by taking advantage of the as prop, or as an inline text wrapper.

Text is available in three different sizes: small, medium and large. In most cases, the default value should be used.

It also has basic typography-related styles applied, such as font-family, font-size, and font-weight.

Best practices

Examples

Basic usage

Start your Certification journey

Sizes

Start your Certification journeyStart your Certification journeyStart your Certification journey

Playground

import { Text } from '@datacamp/waffles/text';

function Playground() {
  return (
    <Text>Start your Certification journey</Text>
  );
}

import { Text } from '@datacamp/waffles/text';

function Playground() {
  return (
    <Text>Start your Certification journey</Text>
  );
}

Live

Props

Text

In addition to the props listed below, Text accepts all props from React.HTMLAttributes<HTMLSpanElement>, such as: aria- and data- attributes.

Name	Type	Description
`as`	`React.ElementType`	The element used to render this component, e.g. `a` or react router `Link`.
`children`Required	`React.ReactNode`	The text content of the component.
`size`	`largemediumsmall`	Defines the size of the Text. In most cases, the default size should be used. Default: `medium`

Imports

You can import the following components, utilities or types from this module:

import { Text } from '@datacamp/waffles/text';
import type { TextProps } from '@datacamp/waffles/text';