Text
Text component is the used to render text and paragraphs within an interface using well-defined typographic styles. It renders a p tag by default.
import { Text } from "rizzui";
Default
The default style of the Text.
The brown fox jumps over the lazy dog
import { Text } from "rizzui";
export default function App() {
return <Text>The brown fox jumps over the lazy dog</Text>;
}
Typography
You can change style by just changing tag property in Text component.
p
The brown fox jumps over the lazy dog
iThe brown fox jumps over the lazy dog
delThe brown fox jumps over the lazy dog
markThe brown fox jumps over the lazy dog
bThe brown fox jumps over the lazy dog
emThe brown fox jumps over the lazy dog
strongThe brown fox jumps over the lazy dog
smallThe brown fox jumps over the lazy dog
abbrHW
q
The brown fox jumps over the lazy dog
kbd
Please press Ctrl + Shift + R to reload this page.
sup
(a+b)2 = a2 + 2ab + b2
sub∑𝐹 = ρ𝑄(𝓥out - 𝓥in)
import { Text } from "rizzui";
export default function App() {
return (
<>
<Text as="p">The brown fox jumps over the lazy dog</Text>
<Text as="i">The brown fox jumps over the lazy dog</Text>
<Text as="del">The brown fox jumps over the lazy dog</Text>
<Text as="mark">The brown fox jumps over the lazy dog</Text>
<Text as="b">The brown fox jumps over the lazy dog</Text>
<Text as="em">The brown fox jumps over the lazy dog</Text>
<Text as="strong">The brown fox jumps over the lazy dog</Text>
<Text as="small">The brown fox jumps over the lazy dog</Text>
<Text as="abbr" title="Hello World!">
HW - abbr
</Text>
<Text as="q">The brown fox jumps over the lazy dog</Text>
<Text as="p">
Please press <Text as="kbd">Ctrl</Text> + <Text as="kbd">Shift</Text> +{" "}
<Text as="kbd">R</Text> to reload this page.
</Text>
<Text as="p">
(a+b)<Text as="sup">2</Text> = a<Text as="sup">2</Text> + 2ab + b
<Text as="sup">2</Text>
</Text>
<Text as="em">
∑𝐹 = ρ𝑄(𝓥<Text as="sub">out</Text> - 𝓥
<Text as="sub">in</Text>)
</Text>
</>
);
}
API Reference
Text Props
Here is the API documentation of the Text component.
Props | Type | Description | Default |
---|---|---|---|
as | TextTags | "p" | |
title | abbr string | title attribute only appear when tag is | __ |
fontWeight | TitleWeights | Add font-weight, fontWeight='normal' won't work with b, strong and q tag | "bold" |
className | string | Add custom classes for extra style | __ |
Text Tags
type TextTags =
| "p"
| "b"
| "span"
| "strong"
| "abbr"
| "q"
| "del"
| "em"
| "i"
| "kbd"
| "mark"
| "small"
| "sub"
| "sup";
Title Weights
type TitleWeights = "bold" | "normal" | "medium" | "semibold";