Link

>= v1.5

Link component.

Link, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->link()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Basic Usage

TallStackUI https://tallstackui.com/docs/ui/link

<x-link href="https://google.com.br">
    TallStackUI
</x-link>
 
<!-- or -->
 
<x-link href="https://google.com.br" text="TallStackUI" />
 
<!-- As a normal Blade component,
you can also pass variables for href. -->
<x-link :href="route('welcome')" text="TallStackUI" />
 
<!-- When text, slot, or icon is not set
the href link will be used to be displayed as the text -->
<x-link href="https://tallstackui.com/docs/ui/link" />

The href attribute will be mandatory unless the fragment is defined.

# Size Variations

TallStackUI TallStackUI TallStackUI

<x-link href="https://google.com.br/" text="TallStackUI" sm />
 
<!-- default size -->
<x-link href="https://google.com.br/" text="TallStackUI" md />
 
<x-link href="https://google.com.br/" text="TallStackUI" lg />

# Icon Slot

TallStackUI TallStackUI

<x-link href="https://google.com.br/" text="TallStackUI" icon="link" />
 
<x-link href="https://google.com.br/" text="TallStackUI" icon="arrow-up-right" position="right" />

# Target Blank & Style Options

TallStackUI TallStackUI TallStackUI

<x-link href="https://google.com.br/" text="TallStackUI" blank />
 
<x-link href="https://google.com.br/" text="TallStackUI" bold />
 
<x-link href="https://google.com.br/" text="TallStackUI" underline />

# Query String & Fragment Options

Hover the mouse to see the options in the browser link preview.

TallStackUI TallStackUI

<!-- The "query" accepts an array or an instance of Collection. -->
 
<x-link href="https://google.com.br/" text="TallStackUI" :query="['status' => 'active']" />
 
<x-link href="https://google.com.br/" text="TallStackUI" fragment="query-string-fragment-options" />

# Color Variations

Primary Secondary Slate Gray Zinc Neutral Stone Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose White Black

<x-link href="https://google.com.br/" text="Primary" />
<x-link href="https://google.com.br/" text="Secondary" color="secondary" />
<x-link href="https://google.com.br/" text="Slate" color="slate" />
<x-link href="https://google.com.br/" text="Gray" color="gray" />
<x-link href="https://google.com.br/" text="Zinc" color="zinc" />
<x-link href="https://google.com.br/" text="Neutral" color="neutral" />
<x-link href="https://google.com.br/" text="Stone" color="stone" />
<x-link href="https://google.com.br/" text="Red" color="red" />
<x-link href="https://google.com.br/" text="Orange" color="orange" />
<x-link href="https://google.com.br/" text="Amber" color="amber" />
<x-link href="https://google.com.br/" text="Yellow" color="yellow" />
<x-link href="https://google.com.br/" text="Lime" color="lime" />
<x-link href="https://google.com.br/" text="Green" color="green" />
<x-link href="https://google.com.br/" text="Emerald" color="emerald" />
<x-link href="https://google.com.br/" text="Teal" color="teal" />
<x-link href="https://google.com.br/" text="Cyan" color="cyan" />
<x-link href="https://google.com.br/" text="Sky" color="sky" />
<x-link href="https://google.com.br/" text="Blue" color="blue" />
<x-link href="https://google.com.br/" text="Indigo" color="indigo" />
<x-link href="https://google.com.br/" text="Violet" color="violet" />
<x-link href="https://google.com.br/" text="Purple" color="purple" />
<x-link href="https://google.com.br/" text="Fuchsia" color="fuchsia" />
<x-link href="https://google.com.br/" text="Pink" color="pink" />
<x-link href="https://google.com.br/" text="Rose" color="rose" />
<x-link href="https://google.com.br/" text="White" color="white" />
<x-link href="https://google.com.br/" text="Black" color="black" />

# Without Color

TallStackUI

<x-link href="https://google.com.br/" text="TallStackUI" colorless />
 
<!-- or -->
 
<x-link href="https://google.com.br/" text="TallStackUI" :color="null" />

# Livewire SPA Navigation NEW

An option to easily add Livewire 3 navigation effects in SPA mode.

Navigate Navigate Hover

<!-- For `wire:navigate` -->
<x-link :href="route('route-name-goes-here')" text="Navigate" navigate />
 
<!-- For `wire:navigate.hover` -->
<x-link :href="route('route-name-goes-here')" text="Navigate Hover" navigate-hover />