Link
A styled hyperlink component.
use leptos::prelude::*; use singlestage::link::*; #[component] pub fn LinkExample() -> impl IntoView { view! { <Link href="#">"This is a link"</Link> } }
As Button
Use render_as to render a Link component with Button styling.
use leptos::prelude::*; use singlestage::*; #[component] pub fn LinkButtonExample() -> impl IntoView { view! { <div class="flex flex-col space-y-6"> <Link render_as="button" size="sm" class="text-(--muted-foreground)" href="#"> "Learn More" {icon!(icondata::LuArrowUpRight)} </Link> <Link render_as="button" variant="primary" href="#"> "Learn More" {icon!(icondata::LuArrowUpRight)} </Link> <Link render_as="button" variant="secondary" href="#"> "Learn More" {icon!(icondata::LuArrowUpRight)} </Link> <Link render_as="button" variant="outline" href="#"> "Learn More" {icon!(icondata::LuArrowUpRight)} </Link> </div> } }
As Badge
Use render_as to render a Link component with Badge styling.
use leptos::prelude::*; use singlestage::*; #[component] pub fn LinkBadgeExample() -> impl IntoView { view! { <Link render_as="badge" href="#link"> <span>"Open Link "</span> {icon!(icondata::LuArrowUpRight)} </Link> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::Link; #[component] pub fn LinkAnatomy() -> impl IntoView { view! { <Link /> } }
API Reference
Link
Creates a styled hyperlink.
| Name | Type | Default | Description |
|---|---|---|---|
| render_as | String | "" | Set whether or not this Link should appear as something else. This is similar to asChild. Accepted values are "button" | "badge". |
| mimetype | String | "" | Renamed <a> `type` attribute to avoid name collisions. |
| size | String | "" | For use with render_as, specify the size to render the element. |
| variant | String | "link" | For use with render_as, specify the variant of the element to render. |