Text

A small part for paragraphs and short pieces of copy, such as helper text, a caption, or a label. Text can render as a p, a span, or a div, so it fits inside almost any layout.

Import

import { Text } from "@aizvi/ui";

Basic example

<Text>This is a normal paragraph of text.</Text>

Live preview

Choosing the element

<Text as="span">A small piece of inline text.</Text>
<Text as="div">A block of text inside a div.</Text>

Sizes

<Text size="xs">Extra small</Text>
<Text size="sm">Small</Text>
<Text size="md">Medium</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra large</Text>

Live preview

Weight and color

<Text weight="bold">Bold text</Text>
<Text color="secondary">Softer, secondary text</Text>
<Text color="danger">An error message</Text>
<Text color="success">A success message</Text>

Live preview

Truncating long text

Set truncate to cut off text with an ellipsis instead of wrapping it onto a new line. This only works well when the parent element has a fixed or limited width.

<div style={{ width: "10rem" }}>
  <Text truncate>A very long piece of text that will not fit on one line.</Text>
</div>

Live preview

Props

Text accepts every normal HTML attribute for its element, plus these.

• as, one of p, span, or div. The default is p.
• size, one of xs, sm, md, lg, or xl. The default is md.
• weight, one of regular, medium, or bold. The default is regular.
• color, one of default, secondary, muted, danger, or success. The default is default.
• truncate, a boolean. Cuts long text off with an ellipsis. The default is false.

Accessibility

• Text is for copy, not for page structure. Use Heading for titles, so screen reader users can still scan the page by heading.
• Enough color contrast is already built into every color option, in both the light and the dark theme.