Button Link
A semantic anchor with full button styling, for internal and external links with icons and block layout.
import { ButtonLink } from "@plexui/vue/components/Button";Examples
Overview
Internal link
External link
Colors & variants
Sizing & roundness
size
Icons
size
iconSize
Block
Disabled
API
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | VNode[] | — | Content inside the link button |
color | "primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning" | "primary" | Visual color |
variant | "solid" | "soft" | "outline" | "ghost" | "solid" | Style variant |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Control height and typography scale |
gutter-size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | — | Override horizontal padding |
icon-size | "sm" | "md" | "lg" | "xl" | "2xl" | — | Override icon size |
href | string | — | Link URL |
to | string | RouteLocationRaw | — | Router link destination (internal) |
as | Component | — | Link component override (e.g. RouterLink, NuxtLink) |
external | boolean | — | Force external-link behavior |
optically-align | "start" | "end" | — | Apply optical negative margin alignment |
block | boolean | false | Full width |
pill | boolean | false | Fully rounded |
disabled | boolean | false | Disable link |
disabled-tone | "relaxed" | — | Use relaxed visual tone for disabled state |
@click | (event: MouseEvent) => void | — | Emitted on click, unless disabled |
Configure your Router
Provider
<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router"
import { PlexUIProvider } from "@plexui/vue/components/PlexUIProvider"
</script>
<template>
<PlexUIProvider :link-component="RouterLink">
<RouterView />
</PlexUIProvider>
</template>A link component that declares a to prop, such as RouterLink or NuxtLink, receives the href as to. Elsewhere, internal links go through the router:
<ButtonLink to="/help">Get Help</ButtonLink>Component-level
You can also pass your link component to the as prop:
<ButtonLink :as="NuxtLink" to="/dashboard">Open dashboard</ButtonLink>Styling
Button Link reads these component tokens. Override them at any scope to restyle it:
--button-font-weight: font weight (defaultvar(--font-weight-medium))--button-gap-lg: gap lg (default6px)--button-gap-md: gap md (default4px)--button-gap-sm: gap sm (default3px)