Link
Link component.
Link, Personalization Blocks
Example:
// AppServiceProvider, "boot" method. TallStackUi::personalize() ->link() ->block('block', 'classes');<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 setthe 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.
<x-link href="https://google.com.br/" text="TallStackUI" xs /> <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 /><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 /> <x-link href="https://google.com.br/" text="TallStackUI" italic />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="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" />