Text
A component that displays text using the typography styles from Medusa's design system.
In this guide, you'll learn how to use the Text component.
Text
Was this example helpful?
Usage#
API Reference#
This component is based on the p element and supports all of its props
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
as | "p"| "span"| "div" | "p" |
size | "xsmall"| "small"| "base"| "large"| "xlarge" | "base" |
weight | "regular"| "plus" | "regular" |
family | "sans"| "mono" | "sans" |
leading | "normal"| "compact" | "normal" |
Was this helpful?
Examples#
Text Sizes#
Base size
Large size
XLarge size
Was this example helpful?
Text Weights#
Regular weight
Plus weight
Was this example helpful?
Text Fonts#
Sans font
Mono font
Was this example helpful?
Text Leading#
Normal leading
Compact leading
Was this guide helpful?