Link components can be customized in various ways, including specifying the link text, defining the target URL, and applying different visual styles such as colors, underlines, and text sizes. They serve as an essential tool for creating navigation menus, buttons, hyperlinks, and interactive elements, enabling a seamless and intuitive user experience by connecting various parts of a digital interface. Link components are commonly used in website menus, content sections, and interactive user interfaces to provide users with a means to access different parts of a website or application.

Creating a link is straightforward: just specify a label, an href, and select a color. You can take advantage of our comprehensive support for all colors in the Tailwind palette.

1<x-link label="Primary" href="#" />
2 
3<x-link label="Secondary" href="#" secondary />
4 
5<x-link label="Rose" href="#" rose />

When it comes to sizing options for links, you can choose from the following: sm, md, and lg.

1<x-link label="Blue" href="#" blue sm />
2 
3{{-- You can use |size="md"| too - DEFAULT --}}
4<x-link label="Sky" href="#" sky />
5 
6<x-link label="Amber" href="#" amber lg />

Another customization option for links is the ability to control the underline, and if needed, it can be easily removed.

1<x-link label="Yellow" href="#" yellow underline="always" />
2 
3{{-- DEFAULT --}}
4<x-link label="Green" href="#" green underline="hover" />
5 
6<x-link label="Red" href="#" red underline="none" />