Text

Foundational text primitive.

use radix_yew_themes::Text;
use yew::prelude::*;

#[function_component]
pub fn TextExample() -> Html {
    html! {
        <Text>{"The quick brown fox jumps over the lazy dog."}</Text>
    }
}

API Reference

This component is based on the span element and supports common margin props.

Prop	Type	Default
`as`	`TextAs`	`TextAs::Span`
`as_child`	`Option<Callback<TextChildProps>>`	-
`size`	`Option<Responsive<1..9>>`	-
`weight`	`Option<Responsive<Weight>>`	-
`align`	`Option<Responsive<TextAlign>>`	-
`trim`	`Option<Responsive<LeadingTrim>>`	-
`truncate`	`Option<bool>`	-
`wrap`	`Option<Responsive<TextWrap>>`	-
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-

Examples

As Another Element

Use the as prop to render text as a p, label, div or span. This prop is purely semantic and does not alter visual appearance.

use radix_yew_themes::{Strong, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn TextAsExample() -> Html {
    html! {
        <>
            <Text r#as={TextAs::P}>{"This is a "}<Strong>{"paragraph"}</Strong>{" element."}</Text>
            <Text r#as={TextAs::Label}>{"This is a "}<Strong>{"label"}</Strong>{" element."}</Text>
            <Text r#as={TextAs::Div}>{"This is a "}<Strong>{"div"}</Strong>{" element."}</Text>
            <Text r#as={TextAs::Span}>{"This is a "}<Strong>{"span"}</Strong>{" element."}</Text>
        </>
    }
}

Size

Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing - as text size increases, the relative line height and letter spacing decrease.

use radix_yew_themes::{Flex, FlexDirection, Text};
use yew::prelude::*;

#[function_component]
pub fn TextSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text size=1>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=2>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=3>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=4>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=5>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=6>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=7>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=8>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text size=9>{"The quick brown fox jumps over the lazy dog."}</Text>
        </Flex>
    }
}

Sizes 2-4 are designed to work well for long-form content.

use radix_yew_themes::{AccentColor, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn TextSizeContentExample() -> Html {
    html! {
        <>
            <Text r#as={TextAs::P} mb=5 size=4>
                {"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography."}
            </Text>

            <Text r#as={TextAs::P} mb=5 size=3>
                {"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography."}
            </Text>

            <Text r#as={TextAs::P} size=2 color={AccentColor::Gray}>
                {"The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography."}
            </Text>
        </>
    }
}

Sizes 1-3 are designed to work well for UI labels.

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Grid, GridAlign, Text, Weight};
use yew::prelude::*;

#[function_component]
pub fn TextSizeLabelsExample() -> Html {
    html! {
        <Grid align={GridAlign::Center} columns=2 gap=5 p=3>
            <Flex direction={FlexDirection::Column}>
                <Text size=3 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=2>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>

            <Flex direction={FlexDirection::Column}>
                <Text size=2 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=2>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>

            <Flex direction={FlexDirection::Column}>
                <Text size=2 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=1>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>

            <Flex direction={FlexDirection::Column}>
                <Text size=1 weight={Weight::Bold}>
                    {"Get started"}
                </Text>
                <Text color={AccentColor::Gray} size=1>
                    {"Start your next project in minutes"}
                </Text>
            </Flex>
        </Grid>
    }
}

Weight

Use the weight prop to set the text weight.

use radix_yew_themes::{Text, TextAs, Weight};
use yew::prelude::*;

#[function_component]
pub fn TextWeightExample() -> Html {
    html! {
        <>
            <Text weight={Weight::Light} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>

            <Text weight={Weight::Regular} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>

            <Text weight={Weight::Medium} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>

            <Text weight={Weight::Bold} r#as={TextAs::Div} >
                {"The quick brown fox jumps over the lazy dog."}
            </Text>
        </>
    }
}

Align

Use the align prop to set text alignment.

use radix_yew_themes::{Text, TextAlign, TextAs};
use yew::prelude::*;

#[function_component]
pub fn TextAlignExample() -> Html {
    html! {
        <>
            <Text align={TextAlign::Left} r#as={TextAs::Div}>{"Left-aligned"}</Text>
            <Text align={TextAlign::Center} r#as={TextAs::Div}>{"Center-aligned"}</Text>
            <Text align={TextAlign::Right} r#as={TextAs::Div}>{"Right-aligned"}</Text>
        </>
    }
}

Trim

Use the trim prop to trim the leading space at the start, end, or both sides of the text box.

The prop works similarly to the upcoming half-leading control spec, but uses a common negative margin workaround under the hood for cross-browser support.

use radix_yew_themes::{Flex, FlexDirection, LeadingTrim, Text};
use yew::prelude::*;

#[function_component]
pub fn TextTrimExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text
                trim={LeadingTrim::Normal}
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border-top", "1px dashed var(--gray-a7)"),
                    ("border-bottom", "1px dashed var(--gray-a7)"),
                ]}
            >
                {"Without trim"}
            </Text>
            <Text
                trim={LeadingTrim::Both}
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border-top", "1px dashed var(--gray-a7)"),
                    ("border-bottom", "1px dashed var(--gray-a7)"),
                ]}
            >
                {"With trim"}
            </Text>
        </Flex>
    }
}

Trimming the leading is useful when dialing in vertical spacing in cards or other "boxy" components. Otherwise, padding looks larger on top and bottom than on the sides.

use radix_yew_themes::{Box, Flex, FlexDirection, Heading, LeadingTrim, Text};
use yew::prelude::*;

#[function_component]
pub fn TextTrimBoxExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Box
                p=4
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border", "1px dashed var(--gray-a7)"),
                ]}
            >
                <Heading mb=1 size=3>
                    {"Without trim"}
                </Heading>
                <Text>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Box>

            <Box
                p=4
                style={[
                    ("background", "var(--gray-a2)"),
                    ("border", "1px dashed var(--gray-a7)"),
                ]}
            >
                <Heading mb=1 size=3 trim={LeadingTrim::Start}>
                    {"With trim"}
                </Heading>
                <Text trim={LeadingTrim::End}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Box>
        </Flex>
    }
}

The default trim values are configured for the system font stack that's used by Radix Themes. If you are using custom fonts, you can adjust the trim values using the corresponding CSS variables.

.radix-themes {
    --default-leading-trim-start: 0.42em;
    --default-leading-trim-end: 0.36em;
    --heading-leading-trim-start: 0.42em;
    --heading-leading-trim-end: 0.36em;
}

Truncate

Use the truncate prop to truncate text with an ellipsis when it overflows its container.

use radix_yew_themes::{Flex, Text};
use yew::prelude::*;

#[function_component]
pub fn TextTruncateExample() -> Html {
    html! {
        <Flex max_width="300px">
            <Text truncate=true>
                {"The goal of typography is to relate font size, line height, and line width
                in a proportional way that maximizes beauty and makes reading easier and
                more pleasant."}
            </Text>
        </Flex>
    }
}

Wrap

Use the wrap prop to control text wrapping.

use radix_yew_themes::{Flex, FlexDirection, Text, TextWrap};
use yew::prelude::*;

#[function_component]
pub fn TextWrapExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Flex max_width="270px">
                <Text wrap={TextWrap::Nowrap}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Flex>

            <Flex max_width="270px">
                <Text wrap={TextWrap::Balance}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Flex>

            <Flex max_width="270px">
                <Text wrap={TextWrap::Pretty}>
                    {"The goal of typography is to relate font size, line height, and line width
                    in a proportional way that maximizes beauty and makes reading easier and
                    more pleasant."}
                </Text>
            </Flex>
        </Flex>
    }
}

text-wrap: pretty is an experimental value that is not yet supported in all browsers. However, it can be treated as a progressive enhancement for browsers that do support it.

Color

Use the color prop to assign a specific color. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Text};
use yew::prelude::*;

#[function_component]
pub fn TextColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Text color={AccentColor::Indigo}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Cyan}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Orange}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Crimson}>{"The quick brown fox jumps over the lazy dog."}</Text>
        </Flex>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast with the background.

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Text};
use yew::prelude::*;

#[function_component]
pub fn TextHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Text color={AccentColor::Gray}>{"The quick brown fox jumps over the lazy dog."}</Text>
            <Text color={AccentColor::Gray} high_contrast=true>
                {"The quick brown fox jumps over the lazy dog."}
            </Text>
        </Flex>
    }
}

With Formatting

use radix_yew_themes::{Em, Kbd, Text, TextAs};
use yew::prelude::*;

// TODO

#[function_component]
pub fn TextFormattingExample() -> Html {
    html! {
        <Text r#as={TextAs::P}>
            {"Look, such a helpful "}/*<Link href="#">{"link"}</Link>*/{", an "}<Em>{"italic emphasis"}</Em>{",
            a piece of computer "}/*<Code>{"code"}</Code>*/{", and even a hotkey combination "}
            <Kbd>{"⇧⌘A"}</Kbd>{" within the text."}
        </Text>
    }
}

With Form Controls

Compose Text with formatting components to add emphasis and structure to content.

Composing Text with a form control like Checkbox, RadioGroup, or Switch automatically centers the control with the first line of text, even when the text is multi-line.

use radix_yew_themes::{Box, Flex, Text, TextAs};
use yew::prelude::*;

// TODO

#[function_component]
pub fn TextFormControlsExample() -> Html {
    html! {
        <>
            <Box max_width="300px">
                <Text r#as={TextAs::Label} size=3>
                    <Flex gap=2>
                        /*<Checkbox default_checked=true />*/{" I understand that these documents are
                        confidential and cannot be shared with a third party."}
                    </Flex>
                </Text>
            </Box>
        </>
    }
}

Rust Radix