Mosaic Logo

Mosaic Tiles Demo

Link

A navigation link component with optional button styling.

Examples

Basic Links

Standard link styling

About UsContactBlog
View Code
use leptos::prelude::*;
use mosaic_tiles::link::Link;

#[component]
pub fn BasicExample() -> impl IntoView {
    view! {
        <div class="flex gap-4 items-center">
            <Link href="/link">"About Us"</Link>
            <Link href="/link">"Contact"</Link>
            <Link href="/link">"Blog"</Link>
        </div>
    }
}

Links as Buttons

Links styled as button components

View Code
use leptos::prelude::*;
use mosaic_tiles::link::Link;

#[component]
pub fn AsButtonExample() -> impl IntoView {
    view! {
        <div class="flex gap-4 items-center">
            <Link href="/link" as_button=true>
                "Sign Up"
            </Link>
            <Link href="/link" as_button=true>
                "Log In"
            </Link>
            <Link href="/link" as_button=true>
                "Get Started"
            </Link>
        </div>
    }
}

Target Attribute

Different target attribute values: _self, _blank, _parent, _top

Default (same frame)No target attribute
Target: _selfOpens in same frame
Target: _blankOpens in new tab/window
Target: _parentOpens in parent frame
Target: _topOpens in top-level frame
View Code
use leptos::prelude::*;
use mosaic_tiles::link::Link;

#[component]
pub fn TargetAttributeExample() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-4">
            <div class="flex gap-4 items-center">
                <Link href="/link">"Default (same frame)"</Link>
                <span class="text-sm text-gray-500">"No target attribute"</span>
            </div>
            <div class="flex gap-4 items-center">
                <Link href="/link" target="_self">
                    "Target: _self"
                </Link>
                <span class="text-sm text-gray-500">"Opens in same frame"</span>
            </div>
            <div class="flex gap-4 items-center">
                <Link href="/link" target="_blank" rel="noopener noreferrer">
                    "Target: _blank"
                </Link>
                <span class="text-sm text-gray-500">"Opens in new tab/window"</span>
            </div>
            <div class="flex gap-4 items-center">
                <Link href="/link" target="_parent">
                    "Target: _parent"
                </Link>
                <span class="text-sm text-gray-500">"Opens in parent frame"</span>
            </div>
            <div class="flex gap-4 items-center">
                <Link href="/link" target="_top">
                    "Target: _top"
                </Link>
                <span class="text-sm text-gray-500">"Opens in top-level frame"</span>
            </div>
        </div>
    }
}

Disabled State

Links in disabled state

Available LinkDisabled Link
View Code
use leptos::prelude::*;
use mosaic_tiles::link::Link;

#[component]
pub fn DisabledExample() -> impl IntoView {
    view! {
        <div class="flex gap-4 items-center">
            <Link href="/link">"Available Link"</Link>
            <Link href="/link" disabled=true>
                "Disabled Link"
            </Link>
            <Link href="/link" as_button=true disabled=true>
                "Disabled Button Link"
            </Link>
        </div>
    }
}

External Links

Links to external websites with target and rel attributes

External links should use target="_blank" and rel="noopener noreferrer" for security.

DocumentationGitHub Repository
View Code
use leptos::prelude::*;
use mosaic_tiles::icon::{Icon, IconGitHub, LinkExternal};
use mosaic_tiles::link::Link;

#[component]
pub fn ExternalExample() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-4">
            <p class="text-sm text-gray-600">
                "External links should use "
                <code class="bg-gray-100 px-1 rounded">"target=\"_blank\""</code> " and "
                <code class="bg-gray-100 px-1 rounded">"rel=\"noopener noreferrer\""</code>
                " for security."
            </p>
            <div class="flex gap-4 items-center">
                <Link href="/link" target="_blank" rel="noopener noreferrer">
                    "Documentation"
                </Link>
                <Link href="/link" target="_blank" rel="noopener noreferrer">
                    <Icon icon=IconGitHub class="w-4 h-4" />
                    "GitHub Repository"
                </Link>
                <Link href="/link" target="_blank" rel="noopener noreferrer" as_button=true>
                    "External Button Link"
                    <Icon icon=LinkExternal class="w-4 h-4" />
                </Link>
            </div>
        </div>
    }
}

Anatomy

use leptos::prelude::*;
use mosaic_tiles::link::*;

#[component]
pub fn LinkAnatomy() -> impl IntoView {
    view! { <Link href="/destination">"Link Text"</Link> }
}

API Reference

Link

Navigation link component that can be styled as a button.

Supports standard anchor attributes like href, target, and rel.

AttributeTypeDefaultDescription
hrefStringrequiredThe URL to navigate to
as_buttonboolfalseRender the link as a button component
targetOption<String>NoneTarget attribute (e.g., '_blank', '_self')
relOption<String>NoneRel attribute (e.g., 'noopener noreferrer')
disabledboolfalseWhether the link is disabled
childrenOption<Children>NoneLink content (text, icons, etc.)