estel_docs/content/docs/1.简单文档/5.components/button-link.md

title, icon, badges

title	icon	badges
Button Link	lucide:external-link	value to target Docus https://docus.dev/api/components#buttonlink _blank value icon to target Source lucide:code https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ButtonLink.vue _blank value 0.6.5

Usage

::stack ::div{class="p-3 flex gap-4"} ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"} Get Started :: ::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"} GitHub :: ::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank} Ghost :: ::

::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
  Get Started
::
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
  GitHub
::
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
  Ghost
::

::

Props

::field-group :field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"} :field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"} :field{name="leftIcon" type="string"}[Icon on the left] :field{name="rightIcon" type="string"}[Icon on the right] :field{name="to" type="string"}[Link URL] :field{name="href" type="string"}[Alias to to] :field{name="target" type="Target"}[A target attribute value to apply on the link] :field{name="blank" type="boolean"}[Alias to target='_blank'] ::