Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

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.

PropTypeDefault
as_childOption<Callback<LinkChildProps>>-
sizeOption<Responsive<1..9>>-
weightOption<Responsive<Weight>>-
trimOption<Responsive<LeadingTrim>>-
truncateOption<bool>-
wrapOption<Responsive<TextWrap>>-
underlineLinkUnderlineLinkUnderline::Auto
colorOption<AccentColor>-
high_contrastOption<bool>-

Examples

Size

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> } }

See Also