Text

Import#

import { Text } from '@volue/wave-react';

Examples#

Basic#

Use Text as a wrapper component that will apply constrained set of styles to the text inside. Available text styles are derived from our typography tokens.

Custom semantics#

Text component will render an HTML span element by default, but via the as property, you can set it to render as any HTML element to ensure the underlying document semantics are meaningful. For example, using a p element for marking-up a paragraph.

Visual variants#

Text comes with two built-in variants used for displaying long-form writing. These variants are represented by font-size, font-weight, line-height and font-family values.

• ​
  epsilon is the default variant used for most body text.
• ​
  zeta variant is recommended for small components and conserving space in data-heavy layouts.
• ​
  eta variant is suitable for small amounts of additional information in data-heavy layouts. Use in moderation.

To change the visual variant, use the variant property.

Custom styling#

Apart from selecting variant, you can freely manipulate Text styling, by passing style properties for common text styles. These properties include fontFamily, fontSize, fontWeight, letterSpacing, colorandlineHeight. You can only select design tokens as the value of each property. Combination of the different properties is possible.

Responsive#

Any style or variant property supported by the Text component is responsive, meaning it can accept either a single value or an object that maps values to breakpoints defined in Wave.

For example, you may provide responsive values describing font stack, sizes and weights of each breakpoint:

Alignment#

Text can be aligned via the align prop.

Overflow strategy#

Use the overflowStrategy property to manage how Text behaves with regard to overflow. For example, if you’re displaying user-generated content that may not fit within your layout, you can truncate text with the overflowStrategy set to truncate.

Tabular numbers#

Enable useTabularNumbers property to make numeric glyphs have uniform/tabular widths (rather than proportional). This enables columns of numbers to line up properly, which makes scanning numerical data easier and less error-prone (especially useful in large tables).

API Reference#