1. Components
  2. link

Link

Consistent link primitive supporting inline, underlined, and button-like action styles.

Demo 

<div class="flex flex-col gap-3">
    <div>
        <x-ui.link underlined href="#" class="text-foreground hover:text-foreground">
            Profile Page
        </x-ui.link>
    </div>
    <div>
        <x-ui.link underlined underline-offset="2" href="#" class="text-foreground hover:text-foreground">
            Undeline Offset
        </x-ui.link>
    </div>
    <div>
        <x-ui.link underlined underline-offset="2" href="#" class="text-success hover:text-foreground decoration-success hover:decoration-foreground">
            Undeline colored
        </x-ui.link>
    </div>
</div>

Installation

Shell 
php artisan flexi:add link

Examples

With icon 

<div class="flex flex-col gap-3">
    <div>
        <x-ui.link underlined href="#" class="text-foreground hover:text-foreground flex items-center gap-x-2.5">
            <x-ui.icon name="ph--caret-left" class="flex text-sm" />
            Go Back
        </x-ui.link>
    </div>
    <div>
        <x-ui.link underlined underline-offset="2" href="#" class="text-foreground hover:text-foreground flex items-center gap-x-2.5">
            <x-ui.icon name="ph--caret-left" class="flex text-sm" />
            Back To Profile
        </x-ui.link>
    </div>
    <div>
        <x-ui.link href="#" class="text-success hover:text-foreground  flex items-center gap-x-2.5">
            <x-ui.icon name="ph--house-line" class="flex text-sm" />
            Home Page
        </x-ui.link>
    </div>
</div>

As button 

<div class="flex flex-wrap gap-3">
    <x-ui.link href="#" as-button intent="neutral" class="transition-colors ease-linear">
        Click me
    </x-ui.link>
    <x-ui.link href="#" as-button variant="soft" intent="gray" class="gap-x-2.5">
        Click me
        <x-ui.icon name="ph--caret-right" class="flex text-sm" />
    </x-ui.link>
</div>

API

Prop Description
href (string)
Destination URL. Internal links and hashes stay in the same tab.
asButton (boolean)
Renders the link as a button-styled action while keeping link semantics.
underlined (boolean)
Applies underline styling.
underlineOffset (none|1|2|3|4|8)
Controls underline offset when underlined.
ariaLabel (string|null)
Custom accessible label. Recommended for icon-only links.
disabled (boolean)
Adds disabled accessibility attributes and removes focusability.
Prev
Table

Data-rich table comp...

Next
On this page