Text
The <Text> component is a fundamental part of Marigold's content components. It is designed to display text in a structured and visually appealing way, making it easy to read and understand.
Anatomy
The <Text> consists of a single element that can be rendered as a <div>, <p>, or <span>. It supports various text properties such as alignment, size, weight, and color.
AppearanceTable
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | default | muted | The available variants of this component. |
size | default | xs | sm | base | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl | 8xl | 9xl | The available sizes of this component. |
Usage
The <Text> component is intended for all non-heading text, such as main content, detailed descriptions, and text within other components. Use it whenever you need to display standard paragraph text.
Use <Text> component for paragraphs or other body text.
Don't use the <Text> component for headings or titles. Use the <Heading> component instead.
Rendering as other HTML elements
The <Text> component can be rendered as different HTML elements by using the as prop. This allows you to change the underlying element without losing the styling and behavior of the <Text> component.
- Use a
<p>tag for paragraphs of text. - Use a
<span>for inline text inside a sentence or heading. - Use a
<div>for block-level layout elements without paragraph semantics.
Customizing text
Sometimes you want to highlight text or make it stand out from the rest of the content. The <Text> component supports a color prop that allows you to change the text color. Also you can set the weight and size of the text to make it more prominent.
Props
align?"none" | "left" | "center" | "right";
aria-describedby?string;
aria-details?string;
aria-label?string;
aria-labelledby?string;
as?"div" | "span" | "p";
"div"children?ReactNode;
color?string;
"currentColor"cursor?CursorProp;
fontSize?FontSizeProp;
fontStyle?"italic" | "normal";
id?string;
slot?string;
weight?FontWeightProp;
whiteSpace?"normal" | "nowrap" | "pre" | "preLine" | "preWrap" | "breakSpaces";
wrap?"wrap" | "noWrap" | "balance" | "pretty";
Alternative Component
- Headline: Use the
<Headline>component for titles and headings. It provides a more semantic structure for text that serves as a title or heading, ensuring better accessibility and SEO.