Link

Semantic element for navigation between pages.

use radix_yew_themes::Link;
use yew::prelude::*;

#[function_component]
pub fn LinkExample() -> Html {
    html! {
        <Link href="#">{"Sign up"}</Link>
    }
}

API Reference

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

Prop	Type	Default
`as_child`	`Option<Callback<LinkChildProps>>`	-
`size`	`Option<Responsive<1..9>>`	-
`weight`	`Option<Responsive<Weight>>`	-
`trim`	`Option<Responsive<LeadingTrim>>`	-
`truncate`	`Option<bool>`	-
`wrap`	`Option<Responsive<TextWrap>>`	-
`underline`	`LinkUnderline`	`LinkUnderline::Auto`
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-

Use the size prop to control the size of the link. The 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, Link};
use yew::prelude::*;

#[function_component]
pub fn LinkSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Link href="#" size=1>
                {"Sign up"}
            </Link>
            <Link href="#" size=2>
                {"Sign up"}
            </Link>
            <Link href="#" size=3>
                {"Sign up"}
            </Link>
            <Link href="#" size=4>
                {"Sign up"}
            </Link>
            <Link href="#" size=5>
                {"Sign up"}
            </Link>
            <Link href="#" size=6>
                {"Sign up"}
            </Link>
            <Link href="#" size=7>
                {"Sign up"}
            </Link>
            <Link href="#" size=8>
                {"Sign up"}
            </Link>
            <Link href="#" size=9>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

Weight

Use the weight prop to set the text weight.

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

#[function_component]
pub fn LinkWeightExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link href="#" weight={Weight::Light}>
                {"Sign up"}
            </Link>
            <Link href="#" weight={Weight::Regular}>
                {"Sign up"}
            </Link>
            <Link href="#" weight={Weight::Medium}>
                {"Sign up"}
            </Link>
            <Link href="#" weight={Weight::Bold}>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

Truncate

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

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

#[function_component]
pub fn LinkTruncateExample() -> Html {
    html! {
        <Flex max_width="150px">
            <Link href="#" truncate=true>
                {"Sign up to the newsletter"}
            </Link>
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

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

#[function_component]
pub fn LinkColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link href="#" color={AccentColor::Indigo}>
                {"Sign up"}
            </Link>
            <Link href="#" color={AccentColor::Cyan}>
                {"Sign up"}
            </Link>
            <Link href="#" color={AccentColor::Orange}>
                {"Sign up"}
            </Link>
            <Link href="#" color={AccentColor::Crimson}>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

High-Contrast

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

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

#[function_component]
pub fn LinkHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link color={AccentColor::Gray}>
                {"Sign up."}
            </Link>
            <Link href="#" color={AccentColor::Gray} high_contrast=true>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

Underline

Use the underline prop to manage the visibility of the underline affordance.

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

#[function_component]
pub fn LinkUnderlineExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column}>
            <Link href="#" underline={LinkUnderline::Hover}>
                {"Sign up"}
            </Link>
            <Link href="#" underline={LinkUnderline::Always}>
                {"Sign up"}
            </Link>
        </Flex>
    }
}

Rust Radix