Text
Component for displaying text paragraphs
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.
Appearance
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. |
The Text component supports variants to control visual emphasis.
| Variant | Description | When to use |
|---|---|---|
default | Standard text inheriting the current color. This is the default variant. | Body text, descriptions, and general content. |
muted | Dimmed text with reduced visual emphasis. | Secondary information, captions, or supporting details that shouldn't compete with primary content. |
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.
Do
Use <Text> component for paragraphs or other body text.
Don't
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
Text
Prop
Type
Accessibility props (4)
Prop
Type
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.