Link Icon Button

An icon-only button that always renders as an <a> element. Requires a label prop for accessibility. Use for navigation actions that fit in a compact icon format.

ExamplesCodeUsageChangelog

Variants

Tailwind v4

<LinkIconButton href="/edit/1" variant="ghost" label="Edit record">
  <svg .../>
</LinkIconButton>

Sizes

Tailwind v4

<LinkIconButton href="/record/1" size="sm" label="Open record">
  <svg .../>
</LinkIconButton>

Open in new tab

Tailwind v4

<LinkIconButton
  href="https://docs.example.com"
  target="_blank"
  rel="noopener noreferrer"
  label="Open documentation"
>
  <ExternalLinkIcon />
</LinkIconButton>

Circle shape

Tailwind v4

<LinkIconButton href="/profile" shape="circle" label="User profile">
  <UserIcon />
</LinkIconButton>

Props

Prop	Type	Default	Description
href	string	—	Required. The navigation URL
label	string	—	Required. Accessible label (aria-label + title)
target	string	—	Native anchor target
rel	string	—	Native anchor rel
variant	'primary' | 'secondary' | 'ghost' | 'subtle'	'ghost'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Button size
shape	'square' | 'circle'	'square'	Border radius
disabled	boolean	false	Prevents navigation

Slots

Slot	Description
default	The icon content (SVG or icon component)