Text

A native, styled text element.

The quick brown fox jumps over the lazy dog

size

color

contrast

text

--- 
import { Text } from 'fulldev-ui'
---

<Text
  size="md"
  color="base"
  contrast={false}
  text="The quick brown fox jumps over the lazy dog"
/>

Props

Prop	Type	Default
size	xs \| sm \| md \| lg \| xl	-
color	base \| brand	-
contrast	boolean	-
html	string	-
text	string	-
as	HTMLTag	p
HTML Attributes	Polymorphic<as>	-

Examples

`size`

The size prop cascades: it is inherited from the parent and it is applied to all children.

The quick brown fox jumps over the lazy dog

---
import { Text } from 'fulldev-ui'
---

<Text size="sm">The quick brown fox jumps over the lazy dog</Text>
<Text size="md">The quick brown fox jumps over the lazy dog</Text>
<Text size="lg">The quick brown fox jumps over the lazy dog</Text>

`color`

Sets the color variant used for this component and all its children.

The quick brown fox jumps

---
import { Text } from 'fulldev-ui'
---

<Text color="base">The quick brown fox jumps</Text>
<Text color="muted">The quick brown fox jumps</Text>

`contrast`

Set to true by default on Headings, which you can override by setting it to false.

The quick brown fox jumps

---
import { Text } from 'fulldev-ui'
---

<Text contrast={false}>The quick brown fox jumps</Text>