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

<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" />

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 />
 
<x-link href="https://google.com.br/"
        text="TallStackUI"
        md /> <!-- default size -->
 
<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" />