YA Button Link

A styled anchor component for navigation and URL changes with underline styling, icons, and variant support.

Quick Start

npx shadcn@latest add "https://www.ya.style/r/ya-button-link"

import { YaButtonLink } from '@/components/ui/ya-button-link'

Learn more

Variants

The button link supports two appearance variants: primary and secondary.

Primary Link Secondary Link

<YaButtonLink href="#" variant="primary">Primary Link</YaButtonLink>
<YaButtonLink href="#" variant="secondary">Secondary Link</YaButtonLink>

Sizes

Three sizes are available: lg, default, and sm.

Large Link Default Link Small Link

<YaButtonLink href="#" size="lg">Large Link</YaButtonLink>
<YaButtonLink href="#" size="default">Default Link</YaButtonLink>
<YaButtonLink href="#" size="sm">Small Link</YaButtonLink>

With Icons

Use leftIcon and rightIcon props to add icons before or after the text.

Save for later Open in new tab Both icons

Large with icons Small with icons

import { Bookmark, ExternalLink, ArrowRight } from 'lucide-react'

<YaButtonLink href="#" leftIcon={<Bookmark />}>
  Save for later
</YaButtonLink>

<YaButtonLink href="#" rightIcon={<ExternalLink />}>
  Open in new tab
</YaButtonLink>

<YaButtonLink href="#" leftIcon={<Bookmark />} rightIcon={<ArrowRight />}>
  Both icons
</YaButtonLink>

Disabled State

Use the disabled prop to disable the link.

Disabled Primary Disabled Secondary

<YaButtonLink href="#" disabled>Disabled Primary</YaButtonLink>
<YaButtonLink href="#" variant="secondary" disabled>Disabled Secondary</YaButtonLink>

All Variants and Sizes

LargePrimary Secondary

DefaultPrimary Secondary

SmallPrimary Secondary

Examples

Inline Text Links

Welcome to our platform. You can read our documentation to get started, or contact support if you need help.

Action Links

Download PDF Send email View all products

Quick Links

Usage with Next.js Link

Use the asChild prop to compose with Next.js Link component:

import Link from 'next/link'
import { YaButtonLink } from '@/components/ui/ya-button-link'

<YaButtonLink asChild>
  <Link href="/docs">Documentation</Link>
</YaButtonLink>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary'`	`'primary'`	Visual variant of the link
`size`	`'lg' \| 'default' \| 'sm'`	`'default'`	Size of the link
`leftIcon`	`ReactNode`	-	Icon to display before the text
`rightIcon`	`ReactNode`	-	Icon to display after the text
`disabled`	`boolean`	`false`	Disables the link
`asChild`	`boolean`	`false`	Merge props onto child element
`href`	`string`	-	URL for the link
`...props`	`AnchorHTMLAttributes`	-	Standard anchor attributes

Accessibility

Uses semantic <a> element
Supports aria-disabled for disabled state
Focus visible ring for keyboard navigation
Underline removed on focus to avoid visual conflict with focus ring
Compatible with screen readers