Link

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

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

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