SfLink is a component that allows you to create a consistent link style across your application.
Examples
Link variants
SfLink supports 2 variants that can be set via variant prop: 'primary', 'secondary'.
Customization
When using the 'secondary' variant, the text color of the base state is inherited from the parent element.
You can customize your color palette as a part of your Tailwind config.
Need more customization?
If you need more customization beyond the built-in variants, we recommend copying the SfLink source code and modifying it to your needs. This way, you can have all the custom styles for your design system, but still be able to easily use all of our Blocks.
Accessibility notes
Link component can be rendered as an <a> or <NuxtLink> or any other tag by providing it with prop tag. When no tag provided, the component will render as an <a>. To achieve proper accessibility it is important to implement required properties depending on the passed tag.
Usage with Nuxt Link
You can use the tag prop to render component as NuxtLink.