New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Link

>= v1.5

Link component.

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

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

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

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

Code highlighting provided by Torchlight