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-fg hover:text-fg-title">
            Profile Page
        </x-ui.link>
    </div>
    <div>
        <x-ui.link underlined underline-offset="2" href="#" class="text-fg hover:text-fg-title">
            Undeline Offset
        </x-ui.link>
    </div>
    <div>
        <x-ui.link underlined underline-offset="2" href="#" class="text-success hover:text-fg-title decoration-success hover:decoration-fg-title">
            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-fg hover:text-fg-title flex items-center gap-x-2.5">
            <span aria-hidden="true" class="flex iconify ph--caret-left text-sm"></span>
            Go Back
        </x-ui.link>
    </div>
    <div>
        <x-ui.link underlined underline-offset="2" href="#" class="text-fg hover:text-fg-title flex items-center gap-x-2.5">
            <span aria-hidden="true" class="flex iconify ph--caret-left text-sm"></span>
            Back To Profile
        </x-ui.link>
    </div>
    <div>
        <x-ui.link href="#" class="text-success hover:text-fg-title  flex items-center gap-x-2.5">
            <span aria-hidden="true" class="flex iconify ph--house-line text-sm"></span>
            Home Page
        </x-ui.link>
    </div>
</div>

As button

Click me Click me 
<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
        <span aria-hidden="true" class="flex iconify ph--caret-right text-sm"></span>
    </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